Dasar-dasar membuat aplikasi Web Programing Hand Book I Dasar-dasar membuat aplikasi Web Programing www.TutorialCoding.wordpress.com Modul Website

Software Requarment Server (XAMPP, Apache2Triad, Wampp, Lampp) Browser (Mozila, Opera, Chrom, Safari) Text Editor (Notepad++, Dreamwiver, Netbeans, Codellobster) www.TutorialCoding.wordpress.com Modul Website

Tahapan membuat website Menyiapkan sebuah konsep tentang website yang akan dibuat (E-commers, Sisfo, Company Profile) Membuat design dan analisa kebutuhan dalam membuat program (Software Requarment) Mendisign database dari program yang akan kita buat Mendevelop website sesuai dengan kebutuhan www.TutorialCoding.wordpress.com Modul Website

Teknik membuat website Create Website Terstruktur Framework (OOP) CMS www.TutorialCoding.wordpress.com Modul Website

Terstrukture Pemrograman Terstruktur adalah suatu proses untuk mengimplementasikan urutan langkah untuk menyelesaikan suatu masalah dalam bentuk program. Prinsip dari pemrograman terstruktur adalah Jika suatu proses telah sampai pada suatu titik / langkah tertentu , maka proses selanjutnya tidak boleh mengeksekusi langkah sebelumnya / kembali lagi ke baris sebelumnya, kecuali pada langkah – langkah untuk proses berulang (Loop). Contoh: PHP, C, pascal www.TutorialCoding.wordpress.com Modul Website

Content Management System (CMS) CMS adalah aplikasi web yang berisikan template untuk mengelola isi halaman web secara mudah. Penggunaan Content Management System tidak memerlukan pengetahuan pemrograman web yang handal karena proses instalasi dan cara penggunaannya sudah user friendly. Contoh: Joomla, Wordpress, Drupal, Moodle www.TutorialCoding.wordpress.com Modul Website

Object Oriented Program (OOP) Pemrograman berorientasi objek (Inggris: object-oriented programming disingkat OOP) merupakan paradigma pemrograman yang berorientasikan kepada objek. Semua data dan fungsi di dalam paradigma ini dibungkus dalam kelas-kelas atau objek-objek. Bandingkan dengan logika pemrograman terstruktur. Setiap objek dapat menerima pesan, memproses data, dan mengirim pesan ke objek lainnya. Contoh: Java, C++, PHP, VB.Net www.TutorialCoding.wordpress.com Modul Website

Teknik Pembuatan Website HALAMAN DEPAN HALAMAN ADMIN Template Halaman Depan Template Halaman Admin www.TutorialCoding.wordpress.com Modul Website

Teknik Pembuatan Admin LOGIN ADMIN www.TutorialCoding.wordpress.com Modul Website

Teknik Pembuatan Login LOGIN ADMIN TEMPLATE ADMIN 1. Jika login berhasil maka akan masuk ke halaman ADMIN, Namun jika salah maka akan kembali lagi ke halaman LOGIN. 2. Halaman ADMIN dilindungi dengan SESSION www.TutorialCoding.wordpress.com Modul Website

Teknik Pembuatan Folder Dan File CONTENT/TEMPLATE PRODUK KATEGORI CUSTOMER ORDER LOG OUT CRUD CRUD CRUD CRUD LOG OUT www.TutorialCoding.wordpress.com Modul Website

Pembuatan Component CONTENT/TEMPLATE PRODUK CREATE READ UPDATE DELETE www.TutorialCoding.wordpress.com Modul Website

CODING www.TutorialCoding.wordpress.com Modul Website

Include File Include file tidak hanya digunakan dalam PHP. Namun dalam bahasa yang lain juga digunakan meskipun dengan perintah yang berbeda (beda bahasa tapi fungsinya sama). Pada slide ini akan dibahas cara dinclude file dengan menggunakan bahsa PHP, CSS, JavaScript. Karena dalam pembuatan website minimal kita menggunkaan 3 bahsa tersebut www.TutorialCoding.wordpress.com Modul Website

Include File di PHP <?php Include (‘koneksi.php’); Include (‘../../config/koneksi.php’); ?> Keterangan: Coding diatas berfungsi untuk memasukan file koneksi kedalam file. Ketika kita include sebuah file, maka semua isi file akan masuk. Dalam include file yang perlu di perhatikan adalah path. Path:susunan direktori (letak file dalam computer) www.TutorialCoding.wordpress.com Modul Website

Include File di JS <script type="text/javascript" src="../tiny_mce/tiny_mce.js"> </script> Keterangan: Coding diatas berfungsi untuk memasukan file tiny_mce.js kedalam file. Ketika kita include sebuah file, maka semua isi file akan masuk. Dalam include file yang perlu di perhatikan adalah path. src="../tiny_mce/tiny_mce.js“ (posisi file) Path:susunan direktori (letak file dalam computer) www.TutorialCoding.wordpress.com Modul Website

Include File di CSS <link rel="stylesheet" type="text/css" href=“style.css" /> Keterangan: Coding diatas berfungsi untuk memasukan style.css kedalam file. Ketika kita include sebuah file, maka semua isi file akan masuk. Dalam include file yang perlu di perhatikan adalah path. href=“style.css“ (posisi file) Path:susunan direktori (letak file dalam computer) www.TutorialCoding.wordpress.com Modul Website

Teknik Coding Dan Nama File Index.php Cek_login.php Main.php / Template Produk Kategori Tambah_produk.php Edit_produki.php Tambah_kategori.php Edit_kategori.php Tampil_produkphp Update_produk.php Tampil_kategori.php Update_kategori.php www.TutorialCoding.wordpress.com Modul Website

Index.php <form name="form1" method="post" action="cek_login.php"> <table width="388" border="1" align="center"> <tr> <td colspan="2" align="center">LOGIN ADMIN</td> </tr> <td width="113">USERNAME</td> <td width="259"><label> <input type="text" name="username" id="username"> </label></td> <td>PASSWORD</td> <td><label> <input type="password" name="password" id="password"> <td><input type="submit" name="button" id="button" value="LOGIN"></td> <td><input type="submit" name="button2" id="button2" value="BATAL"></td> </table> </form>

Penjelasan index.php <form name="form1" method="post" action="cek_login.php"> Method=POST Method adalah cara yang digunakan untuk mengirim data yang kita input. Method ada 2 macam yaitu POST dan GET Action=cek_login.php Action adalah lokasi yang akandituju ketika form di proses. Aksi berisi alamat atau URL, jika aksi kosong maka data tidak diproses di file yang lain. www.TutorialCoding.wordpress.com Modul Website

Cek_login.php www.TutorialCoding.wordpress.com Modul Website <?php include "../config/koneksi.php"; $pass=md5($_POST['password']); $user=$_POST['username']; $login=mysql_query("SELECT * FROM admins WHERE username='$user' AND password='$pass' "); $ketemu=mysql_num_rows($login); $r=mysql_fetch_array($login); // Apabila username dan password ditemukan if ($ketemu > 0){ session_start(); $_SESSION[username] = $r[username]; $_SESSION[nama_lengkap] = $r[nama_lengkap]; $_SESSION[password] = $r[password]; $_SESSION[level] = $r[level]; header('location:main.php?page=home'); // header('location:media.php?module=home'); //echo "<script>alert ('Selamat Datang $_SESSION[namalengkap] ');document.location='media.php?page=home' </script> "; } else{ echo "<script>alert ('maaf data yang di masukan tidak valid'); document.location='index.php' </script>"; ?> www.TutorialCoding.wordpress.com Modul Website

Penjelasan Cek_login.php include "../config/koneksi.php"; Memasukan file koneksi kedalam file cek_login.php $user=$_POST['username']; Mengambil data/value yang dikirim dari file index.php (login) $pass=md5($_POST['password']); Mengambil data dan mengenskripsi menjadi md5 $login=mysql_query("SELECT * FROM admins WHERE username='$user' AND password='$pass' "); Membandingkan record didatabase dengan yang di input pada saat login (berdasarkan username dan password) www.TutorialCoding.wordpress.com Modul Website

Penjelasan Cek_login.php (2) $ketemu=mysql_num_rows($login); Melihat apakah username dan password yang diinput sesuai? if ($ketemu > 0) Jika datanya > 0 = 1. Jika data ditemukan (0=salah, 1=benar) session_start(); $_SESSION[username] = $r[username]; Pendaftaran Session untuk autentifikasi user yang akan masuk ke admin. Session adalah kunci untuk masuk kehalaman-halaman yang dilindungi oleh Session www.TutorialCoding.wordpress.com Modul Website

Penjelasan Cek_login.php (3) header('location:main.php?page=home'); Jika username dan password sesuai maka akan di arahkan ke alamat yang dituju. Coding di atas adalah coding redirect Else { echo "<script>alert ('maaf data yang di masukan tidak valid'); document.location='index.php' </script>"; } Jika username dan password salah maka muncul pesan dan akan diarahkan kehalaman login. www.TutorialCoding.wordpress.com Modul Website

Main.php (Template) File main.php adalah file template. Dimaksud dengan file template karena dalam membuat website kita membutuhkan 1 design template untuk menampung semua file atau menu-menu yang ada di website. Template ibarat rumah, menu barang,kategori dll adalah isi dari rumah tersebut. Sehingga supaya menu barang, kategori dll bisa rapi dan tidak berantakan, maka perlu dimasukan ke dalam rumah (template) www.TutorialCoding.wordpress.com Modul Website

Main.php (Template) Template admin membutuhkan perlindungan, dimana hanya yang punya hak (bisa login) saja yang boleh masuk. Untuk melindungi halaman admin dari pengguna penyusup, maka kita menggunakan SESSION. if (empty($_SESSION['username']) and empty($_SESSION['password'])) Apa SESSION ? www.TutorialCoding.wordpress.com Modul Website

Main.php (Template) Template web, berfungsi menampilkna isi dari semua menu yang kita pilih. Sehingga kita membutuhkan sebuah file yang berfungsi menampilkan apa yagn kita mau. File tersebut kita namakan content.php (content) File content kita letakan (include) kedalam template sehingga dimanapun kita membuat file maka akan ditampilkan didalam template (tidak berantakan). www.TutorialCoding.wordpress.com Modul Website

content.php (pengendali) $page=htmlentities($_GET['page']); $halaman="$page.php"; if(!file_exists($halaman) || empty($page)){ include "home.php"; }else{ include "$halaman"; } ?>

content.php (pengendali) Content menampilkan data berdasarkan alamat di URL (browser). Perbedaan teknik dalam membuat website, mempengaruhi coding pada file content (yang dijadikan pengendali). Karena dalam membuat website ada bnyak teknik. Misal: www.privat.com/main.php?page=home Maka yang dibaca oleh content.php adalah ?page=home NB: URL tidak menggunakan .php www.TutorialCoding.wordpress.com Modul Website

content.php (pengendali) Misal kedua: www.private.com/main.php?page=produk/tampil_produk Maka yang dibacaoleh content adalah ?page=produk/tampil_produk NB: URL tidak menggunakan .php www.TutorialCoding.wordpress.com Modul Website

content.php (pengendali) Soal: Apa perbedaan URL www.private.com/main.php?page=produk/tampil_produk Dengan www.privat.com/main.php?page=home www.TutorialCoding.wordpress.com Modul Website