Dasar-dasar membuat aplikasi Web Programing

Presentasi berjudul: "Dasar-dasar membuat aplikasi Web Programing"— Transcript presentasi:

1 Dasar-dasar membuat aplikasi Web Programing
Hand Book I Dasar-dasar membuat aplikasi Web Programing Modul Website

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

3 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 Modul Website

4 Teknik membuat website
Create Website Terstruktur Framework (OOP) CMS Modul Website

5 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 Modul Website

6 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 Modul Website

7 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 Modul Website

8 Teknik Pembuatan Website
HALAMAN DEPAN HALAMAN ADMIN Template Halaman Depan Template Halaman Admin Modul Website

9 Teknik Pembuatan Admin
LOGIN ADMIN Modul Website

10 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 Modul Website

11 Teknik Pembuatan Folder Dan File
CONTENT/TEMPLATE PRODUK KATEGORI CUSTOMER ORDER LOG OUT CRUD CRUD CRUD CRUD LOG OUT Modul Website

12 Pembuatan Component CONTENT/TEMPLATE PRODUK CREATE READ UPDATE DELETE
Modul Website

13 CODING Modul Website

14 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 Modul Website

15 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) Modul Website

16 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) Modul Website

17 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) Modul Website

18 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 Modul Website

19 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>

20 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. Modul Website

21 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>"; ?> Modul Website

22 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) Modul Website

23 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 Modul Website

24 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. Modul Website

25 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) Modul Website

26 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 ? Modul Website

27 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). Modul Website

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

29 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: Maka yang dibaca oleh content.php adalah ?page=home NB: URL tidak menggunakan .php Modul Website

30 content.php (pengendali)
Misal kedua: Maka yang dibacaoleh content adalah ?page=produk/tampil_produk NB: URL tidak menggunakan .php Modul Website

31 content.php (pengendali)
Soal: Apa perbedaan URL Dengan Modul Website