MULOK PEMROGRAMAN WEB - SMA NEGERI 85 JAKARTA by koswara85

VIEWS: 529 PAGES: 68

More Info
									  HTML, CSS, JavaScript, PHP___________________________________________________________




          MODUL PEMROGRAMAN WEB
                              Mulok Siswa Kelas X II IPA


                             Web Mulok : http://www.mulok85.com
                             Email     : koswara@mulok85.com




                            SMA Negeri 8 5 J akrt Barat
                                                   ( untuk kalangan Sendiri )




SMA Negeri 85 Jakarta Barat________________________________________________Koswara, S.Kom
                                                            ( untuk kalangan Sendiri )
HTML, CSS, JavaScript, PHP___________________________________________________________


                                                         DAFTAR ISI

HTML (HYPERTEXT MARKUP LANGUAGE)....................................................................1
  1. ELEMEN DASAR HTML ............................................................................................1
  2. <BR>..............................................................................................................................1
  3. <P></P> .........................................................................................................................1
  4. <HR> .............................................................................................................................2
  5. <FONT></FONT> ........................................................................................................3
  6. <H1></H1> …. <H6></H6>.........................................................................................5
  7. <B></B> atau <STRONG></STRONG> .....................................................................6
  8. <I></I> atau <EM></EM> ............................................................................................6
  9. <U></U>........................................................................................................................7
  10.   <IMG> .......................................................................................................................7
  11.   <TABLE></TABLE>................................................................................................8
  12.   <A></A>....................................................................................................................9
  13.   <DIV></DIV> .........................................................................................................11
  14.   <SPAN></SPAN> ...................................................................................................12
  15.   <OL></OL>.............................................................................................................13
  16.   <UL></UL>.............................................................................................................13
  17.   <FRAMESET></FRAMESET>..............................................................................14
  18.   <FORM></FORM>.................................................................................................15
  19.   ELEMENT PADA FORM.......................................................................................16
CSS (CASCADING STYLE SHEET) ....................................................................................23
  1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE.........................................23
  2. PENULISAN PADA HEAD .......................................................................................23
  3. PENULISAN DENGAN CLASS ................................................................................24
  4. PENULISAN DENGAN ID ........................................................................................25
JAVASCRIPT..........................................................................................................................26
  1. PENULISAN PADA TAG ..........................................................................................26
  2. PENULISAN DENGAN TAG <SCRIPT> .................................................................27
  3. TIPE DATA .................................................................................................................27
  4. VARIABEL .................................................................................................................27
  5. OPERATOR, IF DAN PERULANGAN .....................................................................28
PHP (Hypertext Preprocessor).................................................................................................31
  1. DASAR PENULISAN PHP ........................................................................................31
  2. VARIABEL .................................................................................................................31
  3. TANDA SAMBUNG ..................................................................................................32
  4. OPERATOR MATEMATIKA ....................................................................................32
  5. OPERATOR PERSAMAAN.......................................................................................33
  6. OPERASI PERBANDINGAN ....................................................................................34
  7. OPERATOR LOGIKA ................................................................................................34
  8. IF ..................................................................................................................................34
  9. PERULANGAN ..........................................................................................................36
  10.   ARRAY....................................................................................................................37
  11.   PHP DENGAN FORM ............................................................................................38
  12.   MEMBUAT DATABASE DENGAN NAVICAT..................................................40
  13.   MEMBUAT TABEL ...............................................................................................41
  14.   MEMBUAT USER DATABASE BARU ...............................................................42
  15.   KONEKSI KE SERVER MYSQL ..........................................................................43
  16.   KONEKSI KE DATABASE MYSQL ....................................................................44


SMA Negeri 85 Jakarta Barat________________________________________________Koswara, S.Kom
  HTML, CSS, JavaScript, PHP___________________________________________________________


    17.  MENUTUP KONEKSI............................................................................................44
    18.  MEMBERI PERINTAH KE DATABASE DENGAN QUERY.............................44
    19.  SKRIP MENAMPILKAN DATA ...........................................................................46
    20.  SKRIP MENAMBAHKAN DATA DENGAN FORM ..........................................49
    21.  SKRIP UPDATE DATA DENGAN FORM ...........................................................50
    22.  SKRIP HAPUS DATA ............................................................................................53
    23.  MENAMPILKAN DATA PER HALAMAN..........................................................55
  LAMPIRAN.............................................................................................................................57
    1. SETTING HOME SITE+ 5.5 ......................................................................................57
    2. XAMPP........................................................................................................................61
    3. NAVICAT 2004...........................................................................................................65




SMA Negeri 85 Jakarta Barat________________________________________________Koswara, S.Kom
 HTML, CSS, JavaScript, PHP___________________________________________________________


                                BAB I.
                  HTML (HYPERTEXT MARKUP LANGUAGE)

     1. ELEMEN DASAR HTML




     2. <BR>
        Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan
        diabaikan.

        Contoh:




     3. <P></P>
        Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti
        menggunakan 2 kali <br>

        Atribut:
               align


SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                         1
  HTML, CSS, JavaScript, PHP___________________________________________________________



        Contoh:




     4. <HR>
        Horizontal Line (Garis horizontal)

        Atribut:
               Width
               Align

        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      2
  HTML, CSS, JavaScript, PHP___________________________________________________________




     5. <FONT></FONT>
        Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf

        Atribut:
              Size
              Color
              Face

        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      3
  HTML, CSS, JavaScript, PHP___________________________________________________________




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      4
 HTML, CSS, JavaScript, PHP___________________________________________________________




    6. <H1></H1> …. <H6></H6>
       Untuk membuat heading yang memberikan baris baru

       Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     5
  HTML, CSS, JavaScript, PHP___________________________________________________________


     7. <B></B> atau <STRONG></STRONG>
        Membuat huruf tebal.

        Contoh:




     8. <I></I> atau <EM></EM>
        Membuat huruf miring

        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      6
  HTML, CSS, JavaScript, PHP___________________________________________________________




     9. <U></U>
        Membuat huruf dengan garis bawah

        Contoh:




     10. <IMG>
        Menampilkan gambar

        Atribut:
               src (letak file gambar)
               align (perataan gambar)
               width (lebar gambar dlm persen atau pixel)
               height (tinggi gambar dlm persen atau pixel)
               alt (keterangan gambar)
SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      7
  HTML, CSS, JavaScript, PHP___________________________________________________________



        Contoh:




     11. <TABLE></TABLE>
        Membuat table

        Atribut pada <table></table>
               border
               align (perataan table)
               width
               height
               bgcolor

        Atribut pada <tr></tr>
               align
               bgcolor
               width
               height

        Atribut pada <td></td>
               align
               bgcolor
               width
               height

        Contoh:


SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      8
  HTML, CSS, JavaScript, PHP___________________________________________________________




     12. <A></A>
        Untuk membuat link

        Atribut:
               href
               name

        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      9
  HTML, CSS, JavaScript, PHP___________________________________________________________




        Contoh Anchor:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     10
   HTML, CSS, JavaScript, PHP___________________________________________________________


              1. Klik link Ke atas              2. Maka akan tampil bagian atas




      13. <DIV></DIV>
         Membuat blok paragraph dengan baris baru pada akhir paragraf (pengganti
         <p>, digunakan pada css)

         Atribut:
                align (perataan paragraf) nilai left, right, center, justify

         Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      11
  HTML, CSS, JavaScript, PHP___________________________________________________________




     14. <SPAN></SPAN>
        Digunakan pada css untuk memberikan format pada teks yang diblok, tanpa
        membuat baris baru

        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     12
  HTML, CSS, JavaScript, PHP___________________________________________________________


      15. <OL></OL>
         Order list (biasa dikenal dengan numbering)

         Atribut:
                Type (jenis numbering), nilai: 1, A, a, I, i

         Contoh




      16. <UL></UL>
         Unorder List, biasa kita kenal dengan Bullet

         Atribut:
                type (jenis bullet), nilai: disc, square, circle




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     13
  HTML, CSS, JavaScript, PHP___________________________________________________________


         Contoh:




      17. <FRAMESET></FRAMESET>
         Membagi satu halaman web menjadi beberapa halaman, halaman yang dibagi
         masih bisa dibagi lagi.

         Contoh:
         - buat file dengan nama framset.html




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     14
   HTML, CSS, JavaScript, PHP___________________________________________________________


         -   buat file dengan nama halaman1.html




         -   buat file dengan nama halaman2.html




         jalankan framset.html




      18. <FORM></FORM>
         Digunakan sebagai blok dari elemen-elemen form seperti text,texarea.

         Atribut:
         - name (nama form)
         - action (file tujuan dimana form dikirim, digunakan pada server side)
         - method (metode pengiriman, digunakan pada server side) nilai post, get

SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      15
  HTML, CSS, JavaScript, PHP___________________________________________________________



     19. ELEMENT PADA FORM

         <INPUT>
         Tag ini teletak didalam blok tag form

         Atribut:
         - Type (jenis input) nilai text, checkbox, radio, hidden, button,
             submit, reset, file, image
         - Name (nama elemen)
         - Value (nilai isian)

         Contoh:




         Radio




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     16
 HTML, CSS, JavaScript, PHP___________________________________________________________




        Checkbox




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                    17
  HTML, CSS, JavaScript, PHP___________________________________________________________




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     18
  HTML, CSS, JavaScript, PHP___________________________________________________________


         Hidden




         Button




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     19
  HTML, CSS, JavaScript, PHP___________________________________________________________


         Submit




         Reset




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     20
  HTML, CSS, JavaScript, PHP___________________________________________________________


        Textarea




        Select




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     21
  HTML, CSS, JavaScript, PHP___________________________________________________________




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     22
   HTML, CSS, JavaScript, PHP___________________________________________________________


                                   BAB II
                        CSS (CASCADING STYLE SHEET)

      1. PENULISAN PADA TAG DENGAN ATRIBUT STYLE

         Contoh:




      2. PENULISAN PADA HEAD




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      23
  HTML, CSS, JavaScript, PHP___________________________________________________________




     3. PENULISAN DENGAN CLASS




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     24
   HTML, CSS, JavaScript, PHP___________________________________________________________


      4. PENULISAN DENGAN ID




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      25
  HTML, CSS, JavaScript, PHP___________________________________________________________


                                      BAB III
                                    JAVASCRIPT

      1. PENULISAN PADA TAG

         Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     26
  HTML, CSS, JavaScript, PHP___________________________________________________________



     2. PENULISAN DENGAN TAG <SCRIPT>

        Contoh:




     3. TIPE DATA

        Tipe-tipe data pada javascript yaitu: string, number, boolean, null, object dan
        function

     4. VARIABEL

        Dengan variabel kita dapat menyimpan informasi pada memori dan dapat kita
        pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau bisa
        juga langsung dengan nama variabel tersebut.

        Contoh:
        var namaKu = “Fansyah”
        atau
        namaKu = “Fansyah”




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     27
  HTML, CSS, JavaScript, PHP___________________________________________________________




      5. OPERATOR, IF DAN PERULANGAN
         Operator pada javascritp mirip dengan operator pada php, lihat
         pada bagian PHP untuk mempelajari operator matematika,
         perbandingan dan logika. Begitu juga dengan sintak if dan
         perulangan.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     28
 HTML, CSS, JavaScript, PHP___________________________________________________________


        Contoh operator matematika:




        Contoh if:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                    29
   HTML, CSS, JavaScript, PHP___________________________________________________________


         Contoh perulangan dengan for:




         Contoh penulisan function:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      30
  HTML, CSS, JavaScript, PHP___________________________________________________________


                                  BAB IV
                        PHP (Hypertext Preprocessor)

     1. DASAR PENULISAN PHP
        Penulisan php diawali oleh boleh diletakkan dimana saja pada halaman html.
        Penulisan lazimnya ditulis diantara blok <?php… ?>




     2. VARIABEL
        Dengan variabel kita dapat menyimpan nilai atau informasi kedalam memori.
        Variabel dapat kita gunakan berkali-kali sesuai kebutuhan dan nilainya dapat
        kita ganti. Nama variable diawali tanda $. Misal $nama, $alamat. Nama
        variable case sensitif (tidak mengenal perbedaan huruf besar dan kecil). $A
        tidak sama dengan $a. Jenis variable bisa berupa bolean (true atau false)
        string (huruf, angka dan karakter), integer (angka bulat), float atau double
        (angka desimal/pecahan), array, object, NULL. Variabel string bisa diapit
        tanda petik dua, atau petik satu.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     31
  HTML, CSS, JavaScript, PHP___________________________________________________________




         Variabel angka




     3. TANDA SAMBUNG
        Untuk menyambung antara variabel yang satu dengan yang lain, atau
        menggabungkan teks gunkan tanda titik.




     4. OPERATOR MATEMATIKA

         Operator Keterangan                       Contoh              Hasil
         +        Penambahan                       x=2                 4
                                                   x+2
         -       Pengurangan                       x=2                 3
                                                   5-x
         *       Perkalian                         x=4                 20
                                                   x*5


SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     32
  HTML, CSS, JavaScript, PHP___________________________________________________________


         /       Pembagian                          15/5               3
                                                    5/2                2.5
         %       Modulus (sisa pembagian)           5%2                1
                                                    10%8               2
                                                    10%2               0
         ++      Increment (penambahan dengan 1)    x=5                x=6
                                                    x++
         --      Decrement (pengurangan dengan 1)   x=5                x=4
                                                    x--




     5. OPERATOR PERSAMAAN

         Operator Contoh          Sama dengan
         =        x=y             x=y
         +=       x+=y            x=x+y
         -=       x-=y            x=x-y
         *=       x*=y            x=x*y

SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     33
  HTML, CSS, JavaScript, PHP___________________________________________________________


         /=       x/=y             x=x/y
         %=       x%=y             x=x%y


     6. OPERASI PERBANDINGAN

         Operator Keterangan                  Contoh
         ==       Sama dengan                 5==8 hasil false
         !=       Tidak sama dengan           5!=8 hasil true
         >        Lebih besar                 5>8 hasil false
         <        Legih kecil                 5<8 hasil true
         >=       Lebih besar sama dengan     5>=8 hasil false
         <=       Lebih kecil sama dengan     5<=8 hasil true




     7. OPERATOR LOGIKA

         Operator Keterangan         Contoh
         &&       And (dan)          x=6
                                     y=3

                                     (x < 10 && y > 1) hasil true
         ||       Or (atau)          x=6
                                     y=3

                                     (x==5 || y==5) hasil false
         !        Not (tidak)        x=6
                                     y=3

                                     !(x==y) hasil true




     8. IF
        Dengan if kita dapat menjalankan kondisi sesuai dengan yang kita harapkan.
        Misal kita dapat menentukan alur program untuk yang mengisi password
        dengan benar dan alur program untuk mengisi password yang salah.

        Penulisan if dengan 1 statemen:

        if (kondisi/ekpresi)
              kode ini/statemen ini akan dijalankan jika kondisi benar;
        else
              kode ini/statemen ini akan dijalankan jika kondisi salah;

        Penulisan if dengan lebih dari 1 statemen:

        if (kondisi/ekpresi)
        {
              kode ini/statemen      ini akan dijalankan jika kondisi benar;
              kode ini/statemen      ini akan dijalankan jika kondisi benar;
        }
        else
        {
              kode ini/statemen      ini akan dijalankan jika kondisi salah;
              kode ini/statemen      ini akan dijalankan jika kondisi salah;
        }

SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     34
  HTML, CSS, JavaScript, PHP___________________________________________________________


        Contoh:
        IF dengan 2 kemungkinan




        Contoh:
        IF dengan lebih dari 2 kemungkinan




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     35
 HTML, CSS, JavaScript, PHP___________________________________________________________




     9. PERULANGAN
        Perulangan berfungsi untuk mengulang alur program, misal kita bisa
        membuat nomor dari 1 sampai 100 dengan perulangan tanpa mengetikan
        satu persatu. Ada beberapa macam perulangan yaitu for, while,
        do..while, foreach

        Contoh perlulangan for:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                    36
  HTML, CSS, JavaScript, PHP___________________________________________________________


        Contoh perlulangan while:




     10. ARRAY
        Dengan array, kita bisa membuat variabel dengan tipe yang dinamis, dimana
        kita bisa menyimpan banyak data dalam satu variabel array.
        Contoh:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     37
  HTML, CSS, JavaScript, PHP___________________________________________________________




     11. PHP DENGAN FORM

         Contoh dengan kotak text:

         Buatlah file dengan nama data01.php dengan skrip:




         Buatlah file dengan nama data02.php dengan skrip:




         Kemudian jalankan file data01.php, isikan pada kotak nama dengan nama
         anda, kemudian klik tombol submit. Hasilnya akan tampil seperti gambar
         dibawah ini.



SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     38
  HTML, CSS, JavaScript, PHP___________________________________________________________




         Contoh dengan checkbox:

         Buatlah file dengan nama data03.php dengan skrip:




         Buatlah file dengan nama data04.php dengan skrip:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     39
  HTML, CSS, JavaScript, PHP___________________________________________________________




      12. MEMBUAT DATABASE DENGAN NAVICAT

         -   Klik kanan localhost
         -   Pilih New Database
         -   Ketik nama database misal sekolah




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     40
 HTML, CSS, JavaScript, PHP___________________________________________________________




     13. MEMBUAT TABEL
            o Pilih database sekolah, klik New Table




              o Isikan field2
                         id, smalint,6, auto increament
                         nama, varchar, 50

SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                    41
  HTML, CSS, JavaScript, PHP___________________________________________________________


                          alamat, varchar, 255
                          umur, tinyint, 4




               o Simpan dan beri nama guru

     14. MEMBUAT USER DATABASE BARU
         Klik tombol Manage User




          Klik tombol Add User




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     42
  HTML, CSS, JavaScript, PHP___________________________________________________________



          Isikan User name, Host (alamat server mysql, biasanya localhost), password




          Selanjutnya tentukan Privileges (hak istimewa) user. Pilih user, lalu pilih
          privilages yang sesuai, untuk memberikan semua frivilages, klik Grant All,
          lalu klik tombol Set Priv dan Flush Priv




      15. KONEKSI KE SERVER MYSQL




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                        43
 HTML, CSS, JavaScript, PHP___________________________________________________________


        localhost: server dimana database mysql berada
        fansyah: user name
        fans2006: password

     16. KONEKSI KE DATABASE MYSQL




        sekolah: nama database yang dikoneksikan
        $koneksi: nama koneksi

     17. MENUTUP KONEKSI




     18. MEMBERI PERINTAH KE DATABASE DENGAN QUERY

        Ada beberapa perintah query
        - Melakukan perubahan pada data seperti:
           insert into, update, delete

               o INSERT INTO
                 Contoh:
                       insert into guru values(‘Rina’,’Jakarta’,25)
                       insert into guru(nama,umur) values(‘Rina’,25)

               o UPDATE
                 Contoh:
                       update guru set
                       nama=’Tuti’,alamat=’Yogyakarta’,umur=20 where
                       id=1


SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                    44
   HTML, CSS, JavaScript, PHP___________________________________________________________


               o DELETE
                  Contoh:
                         delete from guru where id=1
         - Tidak melakukan perubahan pada data yaitu select.
               o SELECT
                  Contoh:
                         select * from guru
                         select * from guru where kota=’jakarta’ and
                         umur>20
         Contoh skrip dengan query insert into:




         Lihat hasilnya dengan membuka tabel guru




         Contoh skrip dengan query update:




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      45
  HTML, CSS, JavaScript, PHP___________________________________________________________




         Klik tombol refresh, untuk melihat hasil perubahan

         Contoh skrip dengan query delete:




     19. SKRIP MENAMPILKAN DATA

         Sebelum membuat skrip ini, tambahkan beberapa data pada tabel guru




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     46
   HTML, CSS, JavaScript, PHP___________________________________________________________




         Buat file tampil_data1.php




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      47
   HTML, CSS, JavaScript, PHP___________________________________________________________


         Kemudian buatlah file tampil_data2.php, berbeda dengan tampil_data1.php,
         tampilan data guru disini menggunakan tabel.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      48
  HTML, CSS, JavaScript, PHP___________________________________________________________


      20. SKRIP MENAMBAHKAN DATA DENGAN FORM

         Buat file form_tambah1.php




         Lalu buat pula file form_tambah2.php




         Jalankan form_tambah1.php, isikan nama, alamat dan umur, lalu klik tombol
         Submit




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     49
   HTML, CSS, JavaScript, PHP___________________________________________________________



         Jika berhasil akan tampil




      21. SKRIP UPDATE DATA DENGAN FORM

         Ubah tampil_data2.php dengan menambahkan link edit disebelahnya.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      50
   HTML, CSS, JavaScript, PHP___________________________________________________________


         Kemudian buat file form_update2.php




         Terakhir buat file form_update3.php




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      51
  HTML, CSS, JavaScript, PHP___________________________________________________________


         Jalankan tampil_data2.php, klik salah satu yang akan diupdate




         Lakukan perubahan, lalu klik tombol submit




         Jika berhasil, akan tampil




         Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat hasil
         perubahan.



SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      52
   HTML, CSS, JavaScript, PHP___________________________________________________________




      22. SKRIP HAPUS DATA
          Ubah tampil_data2.php dengan menambahkan link hapus disebelahnya.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      53
   HTML, CSS, JavaScript, PHP___________________________________________________________


           Buat file form_hapus2.php




           Jalankan tampil_data2.php, Klik hapus pada salah satu data




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      54
  HTML, CSS, JavaScript, PHP___________________________________________________________


          Jalankan berhasil dihapus akan tampil




          Klik OK, lalu refresh tampilan awal (file tampil_data2.php) untuk melihat
          hasil perubahan.

     23. MENAMPILKAN DATA PER HALAMAN




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      55
  HTML, CSS, JavaScript, PHP___________________________________________________________




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     56
  HTML, CSS, JavaScript, PHP___________________________________________________________


                                     LAMPIRAN

      1. SETTING HOME SITE+ 5.5

            MEMBUKA DAN MENUTUP TAMPILAN FOLDER DAN FILE
            (RESOURCE TAB)
               Tampilan Resource Tab:




               Tekan tombol F9 atau klik tombol Resouce Tab untuk menampilkan
               atau menyembunyikan.




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     57
  HTML, CSS, JavaScript, PHP___________________________________________________________


            MEMBUAT FOLDER BARU
              1. Pilih Drive atau Folder dimana folder baru akan dibuat
              2. Klik kanan pada Resource Tab bagian bawah, pilih Create Folder




               3. Ketikan nama folder baru

            MENAMPILKAN NOMOR BARIS




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     58
  HTML, CSS, JavaScript, PHP___________________________________________________________


            MENGAKTIFKAN WORD WRAP (PENURUNAN BARIS SECARA
            OTOMATIS)




            MENENTUKAN EKTENSI FILE YANG SERING DIGUNAKAN
              1. Buka menu Options, Settings lalu pilih Extention Manager pada
                 Default Extention, isikan file ekstensi yang diinginkan misal .html




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                       59
  HTML, CSS, JavaScript, PHP___________________________________________________________


            MEMBUAT CODE TEMPLATE (KODE/SKRIP YANG SERING
            DITULISKAN)
              1. Buka menu Options, Settings lalu pilih Code Templates, klik tombol
                 Add, kemudian isikan Keyword, Description dan Value
                 Misal anda ingin membuat pembuka dan penutup dari skrip php:




               2. Untuk menggunakan Code Template yang sudah kita buat, tekan
                  ctrl + j




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     60
   HTML, CSS, JavaScript, PHP___________________________________________________________


      2. XAMPP
         XAMPP merupakan php instaler kit yaitu program yang mampu mengiistall
         php, mysql dan komponen-komponen lain menjadi satu kesatuan. XAMPP bisa
         didapatkan di http://www.apachefriends.org
               • INSTALL XAMPP

                    1. Jalankan file installer xampp




                    2. Pilih bahasa Indonesia pada Installer Language




                    3. Klik Next, pada jendela Selamat datang…




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      61
  HTML, CSS, JavaScript, PHP___________________________________________________________




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     62
  HTML, CSS, JavaScript, PHP___________________________________________________________


               •   MENJALANKAN APACHE DAN MYSQL DARI XAMPP
                   CONTROL PANEL

                        1. Double Click XAMPP Control Panel pada desktop




                        2. Klik tombol start pada Apache dan MySql




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     63
  HTML, CSS, JavaScript, PHP___________________________________________________________


               •   MENGECEK APACHE

                        1. Pada browser buka http://localhost
                           Jika tampil halaman xampp, berarti apache sudah jalan.
                           Klik English untuk masuk ke pengaturan xampp




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                     64
   HTML, CSS, JavaScript, PHP___________________________________________________________


      3. NAVICAT 2004
         NAVICAT 2004 adalah program MySql Database Client. Anda bisa
         mendapatkan NAVICAT di http://www.navicat.com/

                o MEMBUAT KONEKSI KE SERVER DATABASE MYSQL

                       1. Buka Menu file, New Connection




                       2. Pada Tab General Setting, isikan Connection Name, Host
                          name/IP Address, User name dan Password
                          Untuk koneksi awal, secara default, mysql server mempunyai
                          koneksi dengan username: root dan tanpa password, untuk
                          Host name isikan localhost




SMA Negeri 85 Jakarta Barat___________________________________________Koswara, S.Kom
                                                                                      65
                          Web Mulok : http://www.mulok85.com
                          Email     : koswara@mulok85.com

								
To top