Senin, 30 April 2018

BSI Purwokerto-Belajar Membuat WEB (PART 5)


Rangkuman Materi Pertemuan-7 (23 April 2018)

CSS (Cascading Style Sheet)
-Inline CSS
-Internal CSS
-Eksternal CSS
Inline CSS
-berada  dalam sebuah tag (method:style)
<p style=”font-size:12px;color:red”
AMIK BSI PURWOKERTO
</P>
Internal CSS
-berada satu halaman/file website
P {
    font-size:12px;
    color:red;
}
</style>
<body>
EKSTERNAL CSS
-Membentuk file tersendiri berektensi  (.css)
-Pemanggilan file css diantara tag <head>
<head>
      <link rel=”stylesheet”  type=”text/css”
Ref=”style.cs”>
</head>
P {
    font-size:12px;
    color:red;
    }
H1 {
       font-size:18px;
       color:blue;
      }
PHP        => Hypertext  Preprocesssor
PHP        => Server side (sisis server)/komputer server, bukan clien side (sisi klien)
PHP        => Untuk pemrosesan data/manipulasi data
Syntax PHP:
<?php   ->  tag pembuka
......        -> statement
?>           -> tag penutup
Contoh penulisan syntax PHP:
-Buatlah folder baru di htdocs dengan nama “belajarphp”
-Buatlah file baru dengan nama “contoh.php” dan isikan didalamnya:

<?php
echo “Ini adalah contoh pengguna PHP”;?>
-Simpan dalam folder belajarphp & buka di browser

Penulisan variabel:
1.Diawali tanda dollar ($)
2.Bersifat Case-sensitive
3.Pengisian nilai variabel menggunakan tanda sama dengan (=)

Contoh penulisan variabel:
<?php
   $nim=12171804
   $nama=”Anggun Kartikasari”;
   echo “Halo Nama saya $nama”;
   echo “<br>”;
   echo “NIM saya $nim”;
?>
-Simpan dalam folder belajarphp dan buka hasilnya di browser

Tipe Data PHP
-String
-Integer
-float
-Boolean
-Array

Tipe Data String:
Contoh tipe data string:
$COBA =”Nomor HP saya 082326103267”;

Tipe Data Integear:
-berbentuk text,bisa angka/huruf/simbol
-diapit oleh tanda petik

<?php
$nilaiuts=90;
$nilaiuas=85;?>
Tipe Data Float:
-berbentuk angka bilangan desimal/pecahan
-tidak perlu diapit tanda pentik

Tipe Data Float:
-berbentuk angka,bilangan desimal/pecahan
-tidak perlu diapit tanda petik
Conto:
<?php
$nilaiuts=80.55;
$nilaiuas=80.77;
?>
Tipe Data Boolean:
-hanya ada 2 nilai:false(salah) atau true (benar)
Contoh:
<?php
$X = false;
$y = true;
Tipe Data Array:
-Menyimpan banyak nilai variabel
Contoh:
$user=(”joko” ,“dwi”, “mulyanto”);
Echo $user[0];
?>
Manipulasai String pada PHP
Strlen()                           =menghitung jumlah karakter
Str_word_count()           =menghitung jumlah kata
Strrev ()                          =membalikan urutan karakter
Str_replace()                   =mengganti kata
Contoh:
-Buat file baru dengan nama:manipulasi.php
-isikan codingnya:

<?php
$nama=”Bina Sarana Informatika”;
echo strlen ($nama);
echo “<br>”;
echo str_word_count($nama);
echo “<br>”;
echo strrev($nama);
echo “<br>”;
echo str_replace(“Bina”,”Tempat”<$nama);
?>


Berikut adalah gambar hasil percobaan menggunakan HTML





BSI Purwokerto-Belajar Membuat Layout WEB Responsive Sederhana HTML dan CSS


Rangkuman Materi Pertemuan-6 (16 April 2018)

1.Aktivkan XAMPP lalu klik start pada apache dan mysql
2.Masuk folder htdocs
3.Buat folder dengan nama website_2f
4.Didalam folder website_2f buat folder dengan nama CSS dan file dengan nama index.html
    Disimpan dalam folder website_2f

Berikut adalah gambar hasil percobaan membuat "Membuat Layout WEB Responsive Sederhana HTML dan CSS" menggunakan HTML








Kamis, 12 April 2018

BSI Purwokerto - Belajar Web (PART 4)

Rangkuman Materi Pertemuan-5 (9 April 2018)


Membuat form menggunakan bantuan tag <table>
1.Aktifkan XAMPP (Apache & MySQL)
2.Buat folder bsru di htdocs dengan nama; web2f
3.Buat folder  baru di dalam folder web2f dengan nama: webadmin
4.Buat file baru didalam folder webadmin dengan nama: index.html
5.Ketikan strukyur dasar HTML di dalam file tsb lalu simpan


Tag <span>...</span> dan <div>...</div>
<div> dan <span> keduanya tidak memiliki maksud/ tujuan

<div>                     =>block-line(membuat blok/baris baru) <p>,<h1>
<span>                                 =>in-line(tidak membuat blok/baris baru)<b>,<i>,<u>
6.Buat file baru di dalam folder web2f dengan nama :index.html
7.Ketikan struktur dasar HTML di dalam file tsb lalu simpan
8.Buat file baru namanya: profil.html di dalam folder web2f.
   Copy semua coding si dalam file index.html ke dalam file profil.html
9.Buat file baru namanya:galeri.html di dalam folder web2f.
  Copy semua coding di dalam file index.html ke dalam file galeri.html

Berikut adalah gambar hasil percobaan membuat "Web Admin" menggunakan HTML
1.Script  dan hasil script "membuat web admin" menggunakan HTML


2.Script membuat web admin  menggunakan HTML


  Hasil script membuat web admin menggunakan HTML (web HTML)


3.Script membuat web admin menggunakan HTML


  Hasil script membuat web adamin menggunakan HTML (web HTML)





BSI Purwokerto - Belajar Membuat Web (PART 3)


Rangkuman Materi Pertemuan-4 (2 April 2018)

Tag form inputan HTML
<form>...</form>
=>Tag untuk pemrosesan

Di dalam tag  <form>ada beberapa elemen pendukung
<input>
<select>
<option>
<textarea>
....dsb

Atribute pada tag <form>:
Action=> menuju ke linnk pemrosesan
Cth:
<form action=”proses.html”>
Method=> get (mengambil nilai) atau post (mengirim nilai)
Cth:
<from method=”get”>
Enctype=> encoding type,saat digunakan method post
Cth:
<form enctype=”multipart/form-data”>

Multipart/form-data= digunakan bila pemrosesan sebuah form mengandung file/gambar

Name=>penamaan form
Contoh:
<form name=”FBiodata”>

Target=>menentukan tempat setelah pemrosesan
Contoh:
<form Trget=”_blank”>

Form akan memmbuka tab baru di browser setelah pemroseaan
Tag <input>
Attribute Tag <input>:
Nama              =penamaan tag
Disabled          =menonaktivkan tag
Widht              =mengatur lebar tag(type: image)
Height             =mengatur tinggi tag(type:image)
Size                  =lebar kolom inputan
Maxlength       =mengatur jumlah maksimum karakter
Placeholder     =keterangan text dalam tag
Required         =tag harus di isi
Readonly         =hanya bisa dibaca,tidak bisa dirubah
Value               =isi/nilai dari tag
Type                =tipe inputan
Cth:
<inputw type=”password”>
Attribute type pada tag<input>:
Text,radio,checkbox,file,submit,reset,password
-Buat file baru :formulir.html dalam folder”lat1”
-Ketikan struktur dasar HTML,pada file dsb:
Contoh script HTML


Hasil script  web HTML


 Berikut adalah gambar hasil percobaan membuat "Web Admin" menggunakan HTML
1.Script dan hasil script "membuat nama lengkap" menggunakan HTML


 2.Script dan hasil script "membuat alamat" menggunakan HTML

3.Script dan hasil script "membuat daftar  Jenis kelamin" menggunakan HTML


4. Script dan hasil script "membuat  daftar hoby" menggunakan HTML


5.Script dan hasil script "membuat  daftar hoby dan jenis kelamin" menggunakan HTML



6. Script dan hasil script "mengubah tulisan nama menjadi password" menggunakan HTML



 7.Script dan hasil script "menentukan  daftar status hubungan" menggunakan HTML


8. Script dan hasil script "menyisipkan kolom gambar" menggunakan HTML



9. Script dan hasil script "membuat tulisan simpan dan batal" menggunakan HTML



Minggu, 01 April 2018

BSI Purwokerto - Belajar Membuat Tabel (PART 2)




Rangkuman Materi Pertemuan-3 (26 Maret 2018)

1.       Aktivkan XAMPP (Apache dan MySQL)
2.       Membuat tabel menggunakan HTML
TAG <table>
Sruktur:
Tabel  terdiri dari baris dan kolom
               
Attribute  HTML <table>,<tr>,<th>,<td>
tr =table row (baris tabel)
td=table data (isi table/kolom)
th= table heading (judul kolom)
Struktur tag Tabel <table>
<table>
   <tr>
         <td>....</td>
         <td>....</td>
   </tr>
   </tr>
         <td>....</td>
         <td>....</td>
</table>
             
 Penulisan Atribut HTML:
<nama_tag nama_atribute=”isi_atribute”>
Ex: <table widht=”400”>
Align= perataan (center,left,right)
Ex: <table align=”center”>
Widght=Lebar(diisi dengan angka satuannya piksel/px%)
Ex: <table widht=”500”>
      <table wdht=”30%”i>
< a href=”percobaan html”title=”Halaman Percobaan>
target=”_blank”Pergi  Ke Percobaan<a/>
              bgcolor = backgorund color tabel
Ex: <table  bgcolor=”pink”>
cellspacing=  jarak garis tepi dalam dengan garis tepi luar
Ex: <table celllspacing=”2”>
rowspan=  menggabungkan baris
Ex: <td rowspan=”3”>
colspan= menggabungkan kolom
Ex: <td colspan=”2”>
             
 Menampilkan Gambar Menggunakan HTML
TAG IMAGE: <img/>
Atribute Tag  Image:
Src          =source (alamat gambar)
Title       =tooltip (muncul keterangan saat gambar disorot)
Height   =tinggi gambar
Widht    =lebar gambar
Alt          =keterangan pengganti jika gambar tidak brhasil di load
Ex: <a href =”index html”>Home</a>
       <a href=”http://bsi.ac.id”>Home</a>
Target =membuka link di tab bau browser
Ex: <a target=”_blank” >Home</a>
Title=tooltip (muncul keteranagan saat link disorot)
Ex: <a litle=”Halaman Beranda”>Home</a>
</table>
<br>
<br>
<a href=”percobaan.html”litle=”Halaman Percobaan”target=”_blank”>Pergi Ke Percobaan</a>

Membuat Hyperlink/Link
Tag  Anchor <a>
Atribute Tag Anchor:
Href=referensi (alamat web/nama file)
Ex: <a href=”index.html”>Home</a>
      <a href=”http://bai.ac.id/”>Home</a>
Target =membuka link di tab baru browser
Ex: <a target=”a target”_blank>Home</a>
Title=tooltip (muncul keterangan saat link disorot)
Ex: <a title=”Penunjuk Arah”>

Berikut adalah gambar hasil pecobaan ‘’Membuat Tabel Menggunakan HTML”
1.Script “membuat tabel menggunakan HTML




             Hasil script “membuat tabel menggunakan HTML (Web HTML)

            
             2. Hasil Script  Latihan Baris dan Tabel (Web HTML)


3. Hasil Script Latihan Tabel Berwarna  (Web HTML)



                4. Hasil Script Menggabungkan Baris (Web HTML)


                5. Hasil Script Menampilkan Gambar menggunakan HTML (Web HTML)






Tugas E-Learning BSI pertemuan 2 Makul Etika Profesi Teknologi Informasi & Komunikasi (EPTIK)

ETIKA PROFESI            A.     Pengertian Etika Etika berasal dari bahasa Yunani  ethos  dengan bentuk jamaknya yakni ( ta etha ) ya...