• Tidak ada hasil yang ditemukan

Modul Web Programming

N/A
N/A
Protected

Academic year: 2023

Membagikan "Modul Web Programming"

Copied!
120
0
0

Teks penuh

Struktur navigasi dapat dikatakan merupakan representasi dari hubungan atau rantai kerja seluruh elemen yang akan digunakan dalam aplikasi. Struktur navigasi hierarki, biasa disebut struktur percabangan, adalah struktur berdasarkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Struktur navigasi campuran merupakan gabungan dari tiga struktur sebelumnya yaitu linier, non linier, dan hierarki.

Struktur navigasi ini banyak digunakan untuk membuat website karena struktur ini dapat digunakan untuk membuat website sehingga dapat memberikan interaksi yang lebih tinggi.

Pembuatan Tabel Menggunakan HTML

Penggunaan Cellpadding dan cellspacing

Penggunaan Rowspan dan colspan

MINGGU KE 2

Pengenalan PHP, Variabel, Konstanta, Tipe Data, Komentar dan Operator

  • Pengertian PHP (PHP Hypertext Preprocessor)
  • Memasukkan Kode PHP
  • Variabel
  • Tipe Data
  • Konstanta
  • Komentar
  • Operator
    • Jenis-Jenis Operator a) Operator Aritmatika

Berbeda dengan halaman HTML pada umumnya, kode PHP tidak akan langsung dikirimkan oleh server ketika permintaan dibuat oleh klien (browser), tetapi melalui pemrosesan sisi server, sehingga PHP disebut skrip sisi server. Untuk membedakan kode PHP dengan kode HTML, kode PHP mempunyai tag pembuka di bagian depan dan tag penutup di akhir kode PHP. Hasil akhir dari pengolahan kode PHP akan dikembalikan dalam bentuk kode HTML yang akan ditampilkan di browser.

Pada modul ini bahasa pemrograman yang digunakan adalah PHP Versi 5, sehingga jenis tag yang akan digunakan adalah tag standar.

MINGGU KE 3

Pengenalan Form, Percabangan, dan Perulangan

Pengolahan Data Dari Form

Form pada HTML dikenal dengan tag

dan ditutup dengan tag
. Buat file untuk menangani variabel yang disediakan oleh file methodget.php, beri nama file: methodgetproduk.php. Buat file untuk memproses variabel yang disediakan oleh file methodpost.php, beri nama file: methodpostprocess.php.

Artinya alamat tindakan akan mengacu pada halaman itu sendiri dan bukan halaman lainnya.

Pernyataan Seleksi

  • Statement IF a. If Tunggal
  • Statement Switch

Jika pernyataan else memberikan alternatif pilihan lain, maka pernyataan ElseIf dapat digunakan untuk merumuskan banyak alternatif pilihan (lebih dari dua pilihan).

Perulangan (Looping)

  • Buatlah script sehingga mendapatkan tampilan sebagai berikut : Tampilan Input

MINGGU KE 4 Javascript dan CSS

JavaScript

  • Menuliskan teks = contohjshtml
  • Memformat teks dengan tag HTML = contohjshtml
  • JavaScript yang diletakkan pada bagian HEAD = contohjshtml
  • JavaScript yang diletakkan pada bagian BODY = contohjshtml
  • Fungsi = contohjshtml
  • Fungsi dengan argumen = contohjshtml
  • Memunculkan tanggal lengkap = contohjshtml

Cascading Style Sheets (CSS)

  • MENULIS CSS
  • Selector ID dan Class pada CSS
  • Properti-properti CSS
  • PADDING, MARGIN DAN BORDER

Berisi aturan CSS yang terdiri dari properti dan nilainya yang dipisahkan oleh titik dua. Ini adalah kelas semu milik elemen HTML, yang memungkinkan kita menentukan gaya untuk kondisi elemen tertentu. Padding: Mendefinisikan jarak antara komponen tubuh dan perbatasan atau ukuran jarak dalam. Perbatasan: Ini adalah tepi komponen.

Ditulis dengan CSS border:1px dotted, urutan penggunaannya adalah ukuran border, style border dan warna border atau bisa juga anda gunakan. Diketik dengan margin CSS:5px 5px 5px 5px;  Urutannya ada yang atas, kanan, bawah dan kiri, namun bisa juga menggunakan bagian atas. Salin skrip berikut dan simpan di folder module_web1 bernama style_css.css.

Copy script berikut lalu simpan pada folder modul_web1 dengan nama alat_css.html.

MINGGU KE 5 Membuat Template Web

MINGGU KE 6 Pengenalan Codeigniter

Framework Web

Codeigniter

Instalasi Software

  • Instalasi Codeigniter
  • Struktur Folder Codeigniter

Sebagian besar framework di atas menerapkan pola desain Model-View-Controller (MVC), yang memisahkan bagian kode untuk mengelola proses bisnis dari bagian kode untuk keperluan presentasi (tampilan). Setelah itu, sekarang coba akses folder tersebut melalui browser Anda dengan memasukkan url http://localhost/belajar-codeigniter. Pertama, jika kita fokus pada folder application/config, di dalam folder konfigurasi ini terdapat file-file konfigurasi utama, dan yang pertama, untuk memudahkan pembuatan dan pengembangan semua file yang akan dibuat, dan semuanya dimulai dengan rute.php Jika kita buka pada file tersebut kita akan menemukan default_controller yang diisi dengan nama “welcome” dimana default_controller ini berfungsi ketika user tidak melakukan atau mengetik apapun pada URL browser maka secara otomatis akan menemukan controller dengan nama “welcome”.

Pada file Welcome_controller terdapat fungsi indeks yang digunakan untuk memuat bagian view atau memanggil halaman views dengan nama Welcome_messages sebagai berikut. Bagian ini menempatkan semua HTML dan CSS yang nantinya akan ditampilkan kepada pengunjung.

MINGGU KE 7 Model View Controller

Pengertian Model View Controller (MVC)

Misalnya jika Anda ingin membuat aplikasi untuk menghitung luas dan keliling lingkaran, Anda dapat memodelkan objek lingkaran tersebut sebagai kelas model. View adalah bagian yang menangani halaman antarmuka pengguna atau halaman yang ditampilkan oleh pengguna (di browser). Kontroler merupakan kumpulan instruksi tindakan yang menghubungkan model dan tampilan, sehingga pengguna tidak akan berinteraksi langsung dengan model, intinya data yang disimpan dalam database (model) diambil oleh pengontrol dan kemudian pengontrol menampilkannya ke tampilan .

Dari penjelasan view model dan controller di atas dapat disimpulkan bahwa controller merupakan penghubung antara view dan model. Sehingga pembagian tugas menjadi mudah dan pengembangan aplikasi dapat dilakukan dengan cepat dan terstruktur.

Menetukan Kontroler Standar (Default)

Pengontrol default dapat ditentukan sesuai keinginan dengan mengkonfigurasi file rute.php yang terletak di folder application\config\. Ada yang membuat sistem password yang diubah secara berkala, ada yang menggunakan sistem password dengan teknik kriptografi yaitu mengenkripsi password sedemikian rupa sehingga tidak mudah dibobol oleh pihak yang tidak bertanggung jawab, ada juga yang menggunakan trik kamuflase untuk mengakses. file, dan sebagainya. Berikut trik untuk mengelabui pihak yang tidak bertanggung jawab agar tidak mudah mencuri atau menggunakan data berbahaya, yaitu dengan menghapus index.php pada URL codeigniter.

Disini sebagai contoh untuk menguji berhasil atau tidaknya penghapusan indeks di CodeIgniter, kita akan mencoba mengakses metode add yang sudah ada di controller Latihan1.php tanpa menyertakan kata index.php di URL-nya. Model harus berisi kode yang menangani proses bisnis untuk data yang dimaksud, misalnya untuk melakukan proses validasi data. Model dapat berisi kode-kode yang digunakan untuk memanipulasi data, misalnya untuk menambah baris data baru, mengubah baris data, dan menghapus baris data pada tabel yang terdapat pada database.

Model tidak boleh berisi kode yang terkait langsung dengan permintaan yang dibuat oleh pengguna melalui URL (tidak berisi $_GET atau .$_POST). Model tidak boleh memuat kode-kode yang berkaitan dengan penyajian (tampilan) halaman web yang akan disajikan kepada pengguna. Views juga bisa berisi perintah-perintah PHP sederhana yang masih terhubung dengan proses pembuatan view, misalnya untuk menampilkan data yang dihasilkan oleh model tertentu.

Tampilan harus menghindari kode PHP yang mengakses permintaan pengguna secara langsung (tidak berisi $_GET atau $_POST). Pengontrol dapat mengakses $_GET, $_POST dan variabel PHP lainnya yang terkait dengan permintaan pengguna.

Parsing Data (mengirimkan nilai) dari controller Ke View

Script diatas akan membuat tampilan form pemasukan data yang akan dikirim dan kemudian diproses ke controller. Pada controller di atas, data yang dimasukkan pada formulir entri mata kuliah diposting dan dimasukkan ke dalam variabel tipe field yang disebut $data dan variabel field ini memiliki 3 komponen field yaitu kode, nama, kredit. Kemudian nilai elemen field akan dikirim kembali ke tampilan menggunakan perintah $this->load->view('view-data-subject', .$data) .

MINGGU KE 9

Membuat Template Web Sederhana

Membuat Template Sederhana yang dinamis

Kita juga perlu mengetahui apa itu MVC sebelum kita masuk ke codeigniter dan melangkah lebih jauh.

. Misalnya, jika Anda ingin membuat aplikasi untuk menghitung luas dan keliling lingkaran, Anda dapat memodelkan objek lingkaran tersebut sebagai kelas model.

. Tampilan antarmuka pengguna dikumpulkan menjadi tampilan untuk dipisahkan dari pengontrol dan model, sehingga memudahkan desainer web dalam mengembangkan tampilan halaman situs web.

.

Oleh karena itu jelas dan sangat mudah untuk mengembangkan aplikasi dengan metode MVC, karena web designer atau front-end developer tidak lagi harus berurusan dengan controllernya, tetapi hanya dengan tampilannya saja. Kemudian buat stylebuku.css agar terlihat lebih bagus dan simpan di folder root sebagai berikut: learn-codeigniter/assets/css/.

Seting base_url () pada codeigniter

Asosiasi yang dibuat adalah Beranda diatur untuk membuka atau mengakses metode indeks(), dan Tentang diatur untuk membuka atau mengakses metode about(). Sekarang buat file tampilan lain dan beri nama v_about.php dan simpan di application/views/v_about.php. Kemudian tambahkan metode baru bernama metode about() ke pengontrol Web.php di bawah metode indeks().

Kemudian jalankan kembali di browser dan klik menu About atau bisa juga langsung mengakses cara about.

MINGGU KE 10 Membuat Form Validasi

Form Validasi

Mekanisme Validasi Data di dalam Form 1. Form ditampilkan ke halaman web

Proses ini akan diulangi hingga semua data yang diperlukan dalam formulir terisi dengan benar. Proses pengecekan data yang dikirim pengguna ke form dilakukan di controller, serta pembuatan aturan dari data tersebut.

Memuat Library Form_validation

Untuk mengetahui sejauh mana pemahaman Anda terhadap materi dasar MVC dari pertemuan 6 hingga pertemuan 10, maka pada pertemuan ini akan dibuatkan studi kasus untuk Anda selesaikan. Buat tampilan form input transaksi pada point 1 antara lain memasukkan nama pembeli menggunakan text, nomor handphone menggunakan text, merk sepatu berupa kombinasi/pilihan pilihan yang berisi Nike, Adidas, Kickers, Eiger, Bucherri. Membuat controller dan model untuk memproses input form sehingga hasilnya ditampilkan pada file tampilan yang berisi hasil proses pengiriman form input.

MINGGU KE 11

Membuat Program Create Read Update Delete (CRUD)

  • Pembuatan Database
  • Membuat Koneksi Database Codeigniter dengan MySQL
  • Menampilkan Data Mahasiswa Membuat Model untuk Proses CRUD
  • Menyimpan Data

Oleh karena itu, kita akan membuat model yang di dalamnya akan terdapat fungsi pemanggilan dan pemrosesan data, seperti menyimpan, memperbarui, dan menghapus. Dengan model seperti diatas, untuk menampilkan data atau mengambil data dari database kita bisa menggunakan fungsi displayData(). Selanjutnya, kita membuat pengontrol yang berisi data parsing yang kita ambil dari model ke tampilan.

Sebelumnya untuk menyimpan data, terlebih dahulu kita menambahkan fungsi penyimpanan data pada model Model Siswa untuk menyimpannya. Dari tampilan skrip kita akan membuat fungsi bernama add() di pengontrol Student.php.

MINGGU KE 12

Membuat Program Create Read Update Delete

Modifikasi ModelMahasiswa

Memperbaharui Data Mahasiswa

Dari skrip di atas kita dapat melihat bahwa mengklik tautan Edit mengarahkan pengontrol siswa dan fungsi edit dengan mengirimkan nilai NIM terhadap data yang dipilih, demikian pula tautan Hapus mengarahkan pengontrol siswa dan fungsi hapus dengan mengirimkan nilai NIM terhadap data yang dipilih. data yang dipilih. Jadi kita akan membuat fungsi bernama edit di controller Student.php. Fungsi edit() berguna untuk memilih data berdasarkan NIM dan menampilkannya dalam tampilan edit-mahasiswa.php.

Nah selanjutnya kita akan membuat file View untuk menampilkan data yang akan kita edit. Data ini dikirim ke fungsi update() di pengontrol Student.php menggunakan metode POST, jadi pada langkah berikutnya kita akan membuat fungsi update() untuk menampung data dan memasukkan data terbaru ke dalam data tersebut. Pada script diatas, ketika proses update dijalankan maka akan dialihkan ke halaman indeks pada student controller (halaman tampilan data).

Menghapus Data Mahasiswa

Dari skrip ini, kita akan membuat fungsi bernama delete() di pengontrol student.php. Script ini pada dasarnya sama dengan update yang mengirimkan nilai NIM sebagai ID (kondisi) yang nantinya digunakan untuk menghapus data yang dipilih.

MINGGU KE 13-15 Presentasi Project

DAFTAR PUSTAKA

Referensi

Dokumen terkait