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)






Minggu, 25 Maret 2018

BSI Purwokerto - Belajar HTML (PART1)



 Rangkuman Materi Pertemuan-2  (19 Maret 2018)

1.Instal  XAMPP
2.Jika sudah selesai di instal,buka aplikasi XAMPP Control Panel
3. Klik tombol start pada bagian apache dan MySQL
                Apahe=>server
                MySQL=>Database
4.Buka windows explorer
5.Masuk ke folder instalasi XAMPP (biasanya di partisi C (Local Disk)=> ://XAMPP)
6.Masuk ke folder htdocs
7.Hapus 2 file yang bernama index (index php dan index html)
   Localhost= localhost/index.php=localhost index.html
8.Buka web browser (firefox,chrome dsb)
9.Ketikan dikolom url addres bar=>C://xampp/htdocs=tempat menyimpan file-file web
10.Buat folder barubernama “lat1” didalam folder htdocs
11.Ulangi langkah ke-9,maka nanti folder”lat1” akan munul
12.Buka aplikasi editor text (Notepad ++/Notepad (bawaan dari windows))

 HTML (HYPERTEXT MARKUP LANGUAGE)
-ELEMEN HTML                 =Satu blok kode yg terdapat tag pembuka dan tag penutup
-TAG HTML                         =Penanda,diketik dengan simbol “<”dan”>” formatb : <nama tag>
-ATRIBUT HTML
STRUKTUR DASAR HTML
<html>
<head>.............<\head>
<body>
.............................
</body>
</html>

13.Isikan di notepad,struktur dasar html beserta tag title
14.Simpan file tersebut ke ke dalam folder “lat1” dengan nama: percobaan.html
15.Ulangi langkah ke-9,pilih folder “lat1”,maka nanti muncul file percobaan.html,kli,k dan lihat hasilnya.

TAG HTML
<b>....</b>         =huruf tebal (bold)
<i>....</i>           =huruf miring (italic)
<u>....</u>         =huruf garis bawah (underline)
<p>....</p>         =paragraf
<marque>...</marque>=text berjalan
<br>....</br>      =ganti barus/enter (break)
<hr>....</hr>      =garis horizontal (horizontal ruler)

16.Tambahkan beberapa tag diatas ke dalam file percobaan ,html.Taruh diantara Tag body>....</body>

HEADING digunakan untuk judul
Ex:judul web,judul berita,judul testimoni,judul artikel
<h1>.....</h1> :paling besar ukuran fontnya
<h2>.....</h2>
<h3>.....</h3>
<h4>.....</h4>
<h5>.....</h5>
<h6>.....</h6> :paling kecil ukuran fontnya
BULLET & NUMBERING
<ul>                                                    ul: unordered list atau ol: ordered list
<li>.....</li>                                         li: list
<li>.....</li>
</ul>


Script HTML 


 

Hasil 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...