Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Beranda
Postingan

Rangkuman Konsentrasi Keahlian 11 RPL

 PEMROGRAMAN WEB

Pemrograman Web

Website merupakan suatu halaman yang berisi banyak informasi yang dapat diakses oleh seluruh pengguna internet di dunia melalui browser. Dalam pemrograman web, ada 2 tipe website yaitu web statis dan web dinamis, Web Statis dapat didefinisikan sebagai website yang kontennya tetap atau tidak berubah-ubah karena setiap lamannya dibuat dengan kode HTML dan CSS serta menunjukan informasi yang sama kepada setiap pengunjung. Sementara, Web Dinamis mempunyai konten yang dapat diupdate secara berkala dengan mudah. 

Web dinamis biasanya dibuat dengan bahasa pemrograman yang lebih kompleks daripada web statis, seperti menggunakan bahasa pemrograman PHP, Javascript, dan lain sebagainya. Web statis tidak menggunakan database untuk menyimpan data nya karena bersifat statis, artinya data yang ditampilkan langsung disimpan di kode HTML. Web dinamis membutuhkan database untuk menyimpan data yang bersifat dinamis, artinya data yang ditampilkan berasal dari basis data sehingga mudah untuk diubah dan tampilan HTML juga akan menyesuaikan dengan isi dari database.

Biasanya programmer pemula dalam membangun web dinamis yang sederhana menggunakan bahasa pemrograman PHP, Javascript dikombinasikan dengan bahasa markup HTML dan desain laman CSS/Bootstrap serta untuk menyimpan datanya menggunakan Database Mysql. Sebagai pembelajaran sederhana, Beberapa tools yang bisa digunakan untuk membuat web dinamis sederhana diantaranya Xampp sebagai Penyedia Layanan Web Server, Sublime Text/Visual Studio Code sebagai code editor, dan Chrome/Firefox sebagai browser penampil aplikasi. Ketiga tools tersebut dapat secara mudah didownload pada website resmi masing-masing.

Xampp :  https://www.apachefriends.org/download.html

Visual Studio Code : https://code.visualstudio.com/download

Chrome : https://www.google.com/intl/id_id/chrome/

Untuk langkah instalasi dan penggunaannya dapat dilihat pada panduan/dokumentasi tools tersebut.

Sebagai programmer, anda harus tahu langkah-langkah dalam mengoperasikan tools-tools tersebut untuk membangun aplikasi web yang anda kerjakan. Penerapan web dinamis saat ini sudah banyak contoh aplikasi/web yang bisa kita lihat dan gunakan di lingkungan sekitar.

 


HTML

HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten halaman web. Berikut rangkuman tentang materi HTML:

  1. Struktur Dasar HTML:

    • <!DOCTYPE html> di awal dokumen HTML menandakan penggunaan HTML5
    • Setiap halaman HTML dimulai dengan tag <html> dan diakhiri dengan </html>.
    • Bagian utama dari halaman HTML terdiri dari tag <head> dan <body>.
    • Tag <head> berisi informasi tentang halaman seperti judul, meta tag, dan referensi ke file eksternal.
    • Tag <body> berisi konten yang akan ditampilkan di halaman web.

  2. Tag Dasar:

    • Tag adalah elemen dasar dalam HTML yang digunakan untuk menandai konten.
    • Contoh tag dasar termasuk <p> untuk paragraf, <h1> hingga <h6> untuk heading, <a> untuk tautan, <img> untuk gambar, <ul> dan <ol> untuk daftar.
    •  Contoh penulisan tag dapat anda lihat pada website https://www.w3schools.com/html/

  3. Atribut:

    • Atribut memberikan informasi tambahan tentang elemen HTML.
    • Contoh atribut termasuk src untuk menentukan sumber gambar dalam tag <img>, href untuk menentukan URL tautan dalam tag <a>, dan class untuk memberi elemen kelas CSS.

  4. Formulir:

    • Tag <form> digunakan untuk membuat formulir interaktif di halaman web.
    • Berbagai elemen formulir termasuk <input> untuk input teks atau tombol, <select> untuk dropdown, <textarea> untuk input teks yang lebih panjang, dan <button> untuk tombol.

  5. CSS dan JavaScript:

    • HTML sering digunakan bersama dengan CSS (Cascading Style Sheets) untuk styling dan JavaScript untuk interaktivitas tambahan di halaman web.
    • CSS digunakan untuk mengontrol tampilan elemen HTML, sedangkan JavaScript digunakan untuk menambahkan fungsionalitas dinamis.

HTML adalah fondasi dari web modern dan merupakan keterampilan dasar yang diperlukan bagi pengembang web untuk membangun halaman web yang responsif dan berinteraksi. Dengan memahami konsep dasar dan elemen-elemen HTML, seseorang dapat membangun halaman web yang berfungsi dengan baik dan mudah dimengerti oleh pengguna.

 

 

PHP

PHP (Hypertext Preprocessor) adalah bahasa pemrograman sumber terbuka yang digunakan terutama untuk pengembangan aplikasi web. Berikut adalah rangkuman singkat tentang materi PHP:

  1. Pengenalan PHP: PHP adalah bahasa pemrograman server-side yang dapat disematkan ke dalam HTML. Ini dijalankan pada server dan menghasilkan konten web dinamis.

  2. Variabel dan Tipe Data: PHP mendukung berbagai jenis variabel seperti string, integer, float, boolean, dan array. Variabel dinyatakan dengan awalan dolar ($).

  3. Operator: PHP mendukung operator aritmatika, perbandingan, logika, dan lainnya, mirip dengan bahasa pemrograman lainnya.

  4. Struktur Kontrol: PHP memiliki struktur kontrol seperti if-else, switch, dan looping (for, while, do-while) untuk mengontrol alur eksekusi program.

  5. Fungsi: Fungsi digunakan untuk mengorganisir kode menjadi unit yang dapat digunakan kembali. PHP memiliki fungsi bawaan dan memungkinkan pembuatan fungsi kustom.

  6. Array: PHP mendukung array, baik array indeks numerik maupun asosiatif. Array dapat digunakan untuk menyimpan dan mengelola kumpulan data.

  7. String Handling: PHP memiliki banyak fungsi untuk manipulasi string seperti penggabungan, pemotongan, pencarian, dan penggantian string.

  8. Form Handling: PHP digunakan secara luas untuk menangani formulir HTML. Data yang dikirimkan melalui formulir dapat diakses dan diproses menggunakan PHP.

  9. Pengelolaan File: PHP memiliki fungsi untuk membuka, membaca, menulis, dan menutup file di server.

  10. Session dan Cookie: PHP mendukung session dan cookie untuk menyimpan informasi pengguna antara permintaan halaman web.

  11. Database Connectivity: PHP dapat terhubung ke berbagai jenis database seperti MySQL, PostgreSQL, dan SQLite untuk menyimpan dan mengambil data.

  12. Error Handling: PHP memiliki mekanisme untuk menangani kesalahan dan penanganan pengecualian untuk mengatasi situasi yang tidak terduga.

  13. Object-Oriented Programming (OOP): PHP mendukung paradigma pemrograman berorientasi objek dengan kelas, objek, properti, dan metode.

  14. Security: PHP memiliki sejumlah praktik keamanan seperti pemeriksaan input, penggunaan parameter yang diikuti oleh parameterized queries, dan fungsi khusus untuk keamanan.

     

    Beberapa Function pada PHP yang biasa digunakan diantaranya adalah :

    Fungsi include() pada PHP digunakan untuk menyertakan dan menjalankan file eksternal di dalam file PHP yang sedang dieksekusi. Ini memungkinkan Anda untuk membagi kode PHP ke dalam beberapa file untuk mengatur kode dengan lebih baik dan memungkinkan penggunaan ulang kode.

    Fungsi echo dalam PHP digunakan untuk menampilkan output ke browser atau ke klien yang mengakses halaman web. Ini adalah cara yang paling umum digunakan untuk mencetak teks, variabel, atau bahkan kode HTML ke layar.

    Fungsi isset() dalam PHP digunakan untuk memeriksa apakah sebuah variabel telah didefinisikan dan memiliki nilai yang tidak NULL. Ini sering digunakan untuk menghindari kesalahan "Undefined variable" dan untuk mengonfirmasi keberadaan variabel sebelum menggunakannya dalam kode.


CRUD (Create, Read, Update, Delete)

1. Pengenalan CRUD

  • CRUD adalah singkatan dari Create, Read, Update, dan Delete. Ini adalah operasi dasar dalam sistem manajemen database yang memungkinkan pengguna untuk mengelola data.
  • Dalam konteks PHP dan database, CRUD digunakan untuk membuat, membaca, memperbarui, dan menghapus data dari database melalui aplikasi web.

2. Membuat Koneksi Database

  • Pertama-tama, Anda perlu membuat koneksi antara PHP dan database Anda. Anda dapat menggunakan fungsi seperti mysqli_connect() untuk menghubungkan PHP ke database MySQL.

3. Create (Membuat Data)

  • Untuk membuat data baru dalam database, Anda perlu menangani input dari pengguna melalui formulir HTML.
  • Setelah menerima input, gunakan pernyataan SQL INSERT untuk menambahkan data baru ke dalam tabel di database.
  • Pastikan untuk melakukan validasi input sebelum memasukkan data ke dalam database untuk mencegah serangan SQL injection.

4. Read (Membaca Data)

  • Untuk membaca data dari database, gunakan pernyataan SQL SELECT.
  • Anda dapat menampilkan data dalam bentuk tabel HTML atau format lainnya pada halaman web.
  • Gunakan fungsi PHP seperti mysqli_query() untuk mengeksekusi pernyataan SQL dan mysqli_fetch_array() untuk mengambil data hasil kueri.

5. Update (Memperbarui Data)

  • Untuk memperbarui data yang ada, Anda perlu membuat formulir HTML yang memungkinkan pengguna untuk memasukkan data yang akan diperbarui.
  • Setelah menerima input, gunakan pernyataan SQL UPDATE untuk memperbarui data dalam tabel berdasarkan kondisi tertentu.
  • Pastikan untuk melakukan validasi input dan menghindari serangan injeksi SQL.

6. Delete (Menghapus Data)

  • Untuk menghapus data dari database, gunakan pernyataan SQL DELETE.
  • Anda perlu memberikan kondisi tertentu untuk mengidentifikasi data yang akan dihapus.
  • Seperti operasi CRUD lainnya, pastikan untuk melakukan validasi dan menghindari serangan injeksi SQL.

7. Kesimpulan

  • CRUD adalah fondasi dari banyak aplikasi web yang memungkinkan pengguna untuk berinteraksi dengan data.
  • Dengan menggunakan PHP dan SQL, Anda dapat membuat aplikasi yang kuat untuk membuat, membaca, memperbarui, dan menghapus data dari database.

Dengan memahami dan mengimplementasikan operasi CRUD, Anda dapat mengembangkan aplikasi web yang dinamis dan berfungsi dengan baik menggunakan PHP.

Berikut adalah perintah SQL untuk operasi Create, Read, Update, dan Delete (disingkat sebagai CRUD) dalam manipulasi data pada tabel database:

1. Create (Membuat Data):
Perintah SQL untuk membuat data baru dalam tabel adalah INSERT INTO.
INSERT INTO nama_tabel (kolom1, kolom2, kolom3) VALUES ('nilai1', 'nilai2', 'nilai3');

2. Read (Membaca Data):
Perintah SQL untuk membaca data dari tabel adalah SELECT.
SELECT * FROM nama_tabel;

3. Update (Memperbarui Data):
Perintah SQL untuk memperbarui data dalam tabel adalah UPDATE.
UPDATE nama_tabel SET kolom1 = 'nilai_baru' WHERE kondisi;

4. Delete (Menghapus Data):
Perintah SQL untuk menghapus data dari tabel adalah DELETE.
DELETE FROM nama_tabel WHERE kondisi;

 

 

CSS dan Bootstrap

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan elemen-elemen pada halaman web. Berikut adalah rangkuman materinya:

  1. Selektor: CSS menggunakan selektor untuk menargetkan elemen yang ingin diubah gayanya. Selektor bisa berupa tag HTML, kelas, ID, atribut, atau pseudoelemen.

  2. Properti: Properti CSS menentukan gaya atau tampilan elemen yang dipilih. Contohnya adalah warna, ukuran font, margin, padding, dan banyak lagi.

  3. Nilai: Setiap properti memiliki nilai yang menentukan bagaimana properti tersebut diaplikasikan. Misalnya, nilai warna bisa berupa nama warna, kode warna, atau nilai RGB.

  4. Box Model: Konsep dasar dalam CSS yang menentukan bagaimana elemen HTML ditempatkan dan diatur dalam halaman. Terdiri dari content, padding, border, dan margin.

  5. Pseudo-classes dan Pseudo-elements: Pseudo-classes digunakan untuk memberikan gaya kepada elemen dalam kondisi tertentu, seperti :hover untuk saat kursor berada di atasnya. Pseudo-elements digunakan untuk memanipulasi bagian spesifik dari elemen, seperti ::before untuk menambahkan konten sebelum isi elemen.

  6. Floats dan Flexbox: Float digunakan untuk mengatur posisi elemen secara horizontal, sementara flexbox adalah teknik layout CSS yang lebih modern untuk mengatur tata letak elemen secara fleksibel dalam satu atau dua dimensi.

  7. Grid: Grid adalah sistem layout CSS yang memungkinkan pembuatan tata letak yang kompleks dan responsif dengan mudah.

  8. Media Queries: Media queries memungkinkan pengembang web menyesuaikan tampilan halaman sesuai dengan perangkat atau kondisi layar, seperti lebar layar atau orientasi.

CSS memungkinkan pengembang untuk memisahkan struktur HTML dari tampilan dan gaya, sehingga mempermudah pemeliharaan dan pengembangan situs web yang konsisten dan menarik.

Bootstrap adalah kerangka kerja (framework) front-end yang digunakan untuk membangun situs web responsif dan mobile-first dengan cepat. Berikut adalah rangkuman materi tentang Bootstrap:

  1. Grid System: Bootstrap menyediakan sistem grid yang fleksibel dan responsif berdasarkan konsep grid 12 kolom. Ini memungkinkan pengembang untuk dengan mudah mengatur tata letak halaman yang responsif di berbagai perangkat.

  2. Komponen UI: Bootstrap dilengkapi dengan berbagai komponen UI siap pakai seperti tombol, formulir, navigasi, kartu, dan lain-lain. Komponen ini dirancang dengan gaya yang konsisten dan responsif, memungkinkan pengembang untuk membangun tampilan situs web dengan cepat.

  3. Utilities: Bootstrap menyediakan serangkaian utilitas CSS yang dapat digunakan untuk menambahkan gaya kecil, seperti margin, padding, warna, dan lain-lain, secara langsung ke elemen HTML tanpa perlu menulis CSS kustom.

  4. Responsif: Bootstrap didesain dengan pendekatan mobile-first, yang berarti komponen dan tata letaknya dioptimalkan untuk tampilan pada perangkat mobile terlebih dahulu, dan kemudian ditingkatkan untuk perangkat desktop.

  5. Kustomisasi: Bootstrap memungkinkan pengembang untuk menyesuaikan tampilan dan gaya situs web dengan mudah melalui Sass variables dan mixins, serta melalui pengaturan kustomisasi pada situs web resminya.

  6. Dokumentasi: Bootstrap dilengkapi dengan dokumentasi yang lengkap dan mudah dipahami, yang memuat contoh kode dan petunjuk penggunaan untuk setiap komponen dan fitur yang disediakan.

Dengan Bootstrap, pengembang dapat membangun situs web yang responsif, estetis, dan mudah dikembangkan dengan cepat, menghemat waktu dan usaha dalam proses pengembangan.

Posting Komentar

© ‧ Belajar TIK. All rights reserved. Premium By Raushan Design