browser icon
You are using an insecure version of your web browser. Please update your browser!
Using an outdated browser makes your computer unsafe. For a safer, faster, more enjoyable user experience, please update your browser today or try a newer browser.

Hari #4 – Training Calon Asisten Comlabs

Posted by on May 6, 2012

Hari/Tanggal : Sabtu, 5 Mei 2012

Bismillah,.. Hari ini, Sabtu tanggal 5 Mei 2012, pelatihan Casis 2012 dilaksanakan pada jam 11.00-12.00 WIB. Pelatihan ini berisi tentang pengenalan website development fundamental oleh Kak Petrus Fajar Subekti. Berikut kurang lebih materinya.

HTML Introduction.

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk membuat suatu website. Bahasa ini akan diterjemahkan oleh browser sehingga tampil website yang kita kunjungi. Dua poin penting dalam HTML adalah adanya tag dan style. Tag merupakan penanda untuk membuat suatu tampilan atau suatu fungsi. Sementara style adalah adalah keterangan tambahan yang menentukan tampilan dari website itu.

Make A Simple HTML Page

Untuk membuat halaman html, kita coba buka teks editor, misal: Notepad++, lalu ketikkan teks berikut:

Hello World!

Lalu simpan file tersebut dengan nama index.html. Di sini, kita telah membuat sebuah dokumen html, tetapi masih berupa dokumen yang sangat sederhana. Untuk membuka dokumen html tersebut dapat menggunakan browser misalnya firefox atau chrome. Pada browser akan terlihat tampilan dari halaman web yang baru saja kita buat, kurang lebih seperti ini:

Tags for text

Tag HTML dapat memberikan efek tertentu pada tampilan. Sekarang kita akan coba langsung untuk membuat file HTML yang memiliki berbagai tag. Penjelasan bisa dilihat langsung hasilnya. Pertama buat file seperti index.html, lalu tambahkan satu per satu baris mulai (9) dan preview setiap Anda melakukan perubahan agar dapat mengetahui arti dari setiap tag. Perlu diketahui bahwa arti dari <br/> adalah break line, atau ganti baris.

<html>                                                               (1)
<head>                                                               (2)
       <title>                                                       (3)
              Tags For Text                                          (4)
       </title>                                                      (5)
       <!—- berisi atribut lain -->                                  (6)
</head>                                                              (7)
<body>                                                               (8)
       <b>tulisan tebal</b> <br/>                                    (9)
       <i>tulian miring</i><br/>                                     (10)
       <u>tulisan bergasir bawah</u><br/>                            (11)
       <s>tulisan dicoret</s><br/>                                   (12)
       <u><b><i>gabungan</i></b></u><br/>                            (13)
       Tes <sup>superscripts</sup><br/>                              (14)
       Tes <sub>subscripts</sub><br/>                                (15)
       <strong>sama dengan bold</strong><br/>                        (16)
       <font size="1">ukuran minimum</font><br/>                     (17)
       <font size="2">ukuran</font><br/>                             (18)
       <font size="3">ukuran</font><br/>                             (19)
       <font size="4">ukuran</font><br/>                             (20)
       <font size="5">ukuran</font><br/>                             (21)
       <font size="6">ukuran</font><br/>                             (22)
       <font size="7">ukuran maksimum</font><br/>                    (23)
       <font color="blue"> biru</font><br/>                          (24)
       <font color="#0000ff"> biru</font><br/>                       (25)
       <font color="red"> merah</font><br/>                          (26)
       <font color="#FF0000"> merah</font><br/>                      (27)
       <font color="green"> hijau</font><br/>                        (28)
       <font color="#00FF00"> hijau</font><br/>                      (29)
       <h1>heading 1</h1><br/>                                       (30)
       <h2>heading 2</h2><br/>                                       (31)
       <h3>heading 3</h3><br/>                                       (32)
       <h4>heading 4</h5><br/>                                       (33)
       <h5>heading 5</h5><br/>                                       (34)
       <h6>heading 6</h6><br/>                                       (35)
</body>                                                              (37)
</html>                                                              (39)

 

Making Table

Pada saat ingin membuat table pada html, kita memakai tag <table>. Berikut cara penggunaannya

<html>
   <head>
          <title>
                 cara membuat tabel
          <title>
   </head>
   <body>
          <table border="1">
          <tr>
                       <th>
                              kepala kolom 1
                       </th>
                       <th>
                              kepala kolom 2
                       </th>
                       <th>
                              kepala kolom 3
                       </th>
                 </tr>
                 <tr>
                       <td>
                              baris 1 kolom 1
                       </td>
                       <td>
                              baris 1 kolom 2
                       </td>
                       <td>
                              baris 1 kolom 3
                       </td>
                 </tr>
                 <tr>
                       <td>
                              baris 2 kolom 1
                       </td>
                       <td>
                              baris 2 kolom 2
                       </td>
                       <td>
                              baris 2 kolom 3
                       </td>
                 </tr>
                 <tr>
                       <td>
                              baris 3 kolom 1
                       </td>
                       <td>
                              baris 3 kolom 2
                       </td>
                       <td>
                              baris 3 kolom 3
                       </td>
                 </tr>
          </table>
   </body>
</html>

Setelah dicoba akan muncul gambar table seperti ini:

 

PHP

PHP (kepanjangan dari PHP: Hypertext Preprocessing) merupakan bahasa pemrograman yang biasa digunakan untuk membuat halaman HTML. File .php yang dibuat akan diproses di dalam server, sedangkan halaman yang akan dikirimkan ke browser pengunjung hanyalah tampilannya.

Untuk memroses PHP di dalam komputer, kita harus menginstall webserver di localhost. Salah satu software yang bisa kita gunakan adalah XAMPP

Apache adalah service webserver, sedangkan mysql adalah databasenya.

Contoh penggunaan php, simpan skrip berikut dengan nama file hallodunia.php di C:\xampp\htdocs dan coba buka http://localhost/hallodunia.php dengan browser.

<html>
<head>
<title>Hallo Dunia PHP</title>
</head>
<body>
<h1>Hello PHP</h1>
<?php
echo '<h2>Hallo, dunia!</h2>';
phpInfo();
?>
</body>
</html>

 

Maka hasilnya kurang lebih seperti ini :

 

Tugas Pertemuan 4 :

Download modul di ftp://ftp.comlabs.itb.ac.id/uploads/Pet/

Tugas 1. Install webserver di localhost, (contoh XAMPP). Buat kode seperti

<html>
<head>
<title>Hallo Dunia PHP</title>
</head>
<body>
<h1>Hello PHP</h1>
<?php
echo '<h2>Hallo, dunia!</h2>';
phpInfo();
?>
</body>
</html>

Jalankan webserver (kalo pake XAMPP berarti yang dijalankan service Apachenya). Save di directory default DocumentRootnya (kalo pake XAMPP ada di C:\xampp\htdocs) dengan extension .php

Tugas 2. Buat tabel perkalian 10 x 10 dengan menggunakan pemrograman PHP. (Kalau yang sudah pernah mengambil PTI A atau PTI B, cara yang dilakukan adalah melakukan looping)
Optional (bonus) : besar ukuran tabelnya sesuai masukan user

Tugas 3 : Install CMS wordpress di localhost.

Tugas dikirim ke imre.nagi@comlabs.itb.ac.id. Batas waktu pengumpulan tugas H-1 MAKRAB.

 

Tubes Makrab

 

Langsung saya copas aja dari kolabs :

Jadi, kalian dipersilahkan untuk menentukan sendiri bentuk kepanitiaannya. Hari senin harus sudah ada susunan kepanitiannya. dipost di kolabs ini dengan membuat topik baru.
Di dalam makrab harus ada video casis yang contohnya bisa dilihat di link yang ada di postingannya Jo.
Selain itu ada acara makan2 serta acara yg mengakrabkan casis lama dan casis baru.
batas waktu pengadaan makrab sebelum tanggal 21 Mei 2012. Usahakan tidak mengganggu waktu ujian.

selain makrab ada tugas lain yang harus diselesaikan sebelum makrab. Tugas itu adalah:
–> foto2,kenalan, dan ngobrol dengan minimal 5 asisten lama. Berkunjunglah ke DKA. Minta biodata,tanda tangan, pesan kesan.
–> foto2 dipost di blog.

 

Berikut contoh video Casis angkatan 2011

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>