Code Monkey home page Code Monkey logo

lab11web's Introduction

Lab11Web

Langkah-langkah praktikum

Langkah 1

Beberapa ekstensi PHP perlu diaktifkan untuk kebutuhan pengembangan Codeigniter 4.

Berikut beberapa ekstensi yang perlu diaktifkan: -php-json ekstension untuk bekerja dengan JSON; -php-mysqlnd native driver untuk MySQL; -php-xml ekstension untuk bekerja dengan XML; -php-intl ekstensi untuk membuat aplikasi multibahasa; -libcurl (opsional), jika ingin pakai Curl.

Untuk mengaktifkan ekstentsi tersebut, melalu XAMPP Control Panel, pada bagian Apache klik Config -> PHP.ini

ss XAMPP1

Pada bagian extention, hilangkan tanda ; (titik koma) pada ekstensi yang akan diaktifkan. Kemudian simpan kembali filenya dan restart Apache web server. ss notepad XAMPP1

Langkah 2

Instalasi Codeigniter 4

-Unduh Codeigniter dari website https://codeigniter.com/download -Extrak file zip Codeigniter ke direktori htdocs/lab11_ci. -Ubah nama direktory framework-4.x.xx menjadi ci4. -Buka browser dengan alamat http://localhost/lab11_ci/ci4/public/ ss 1

Langkah 3

Menjalankan CLI (Command Line Interface)

Codeigniter 4 menyediakan CLI untuk mempermudah proses development. Untuk mengakses CLI buka terminal/command prompt. ss 2

kemudian Arahkan lokasi direktori sesuai dengan direktori kerja project dibuat (xampp/htdocs/lab11_ci/ci4/) Perintah yang dapat dijalankan untuk memanggil CLI Codeigniter adalah: -php spark ss 3

Langkah 4

Mengaktifkan Mode Debugging

Codeigniter 4 menyediakan fitur debugging untuk memudahkan developer untuk mengetahui pesan error apabila terjadi kesalahan dalam membuat kode program.

image

Cara mengaktifkannya dengan mengubah nama file env menjadi .env kemudian buka filenya dan ubah nilai CI_ENVIRONMENT menjadi development.

image

Maka pesan kesalahan akan ditampilkan. image

Langkah 5

Membuat Route

-Router terletak pada file app/config/Routes.php -Untuk mengetahui route yg ada atau telah berjalan dapat menggunakan perintah php spark routes.

image

Selanjutnya mencoba akses route yang telah dibuat dengan mengakses http://localhost:8080/contact Terjadi error file not found dikarenakan tidak ada file/page untuk halaman contact.

image

Langkah 6

Membuat Controller

Membuat file page.php di dalam direktori Controller (/app/Controllers) image

Kemudian refresh browser maka halaman sudah dapat diakses dan menampilkan hasilnya. image

Selanjutnya Menambahkan method baru pada controller page.

Method ini dapat diakses dengan menggunakan alamat: http://localhost:8080/page/tos image

Langkah 7

Membuat View

Membuat file about.php di dalam direktori View (/app/view/about.php) image

selanjutnya Mengubah method about dalam controller page.

image Maka akan tampil seperti ini image

Langkah 8

Membuat Layout Web dengan CSS

Buat file css pada direktori public dengan nama style.css (copy file dari praktikum lab4_layout). image

Kemudian buat folder template pada direktori view, lalu buat file header.php dan footer.php.

image image

Kemudian ubah file about.php (/app/view/about.php) seperti berikut.

include('template/header'); ?>


include('template/footer'); ?> Kemudian refresh browser atau akses alamat http://localhost:8080/about ![image](https://user-images.githubusercontent.com/56379905/122570258-c6344f00-d075-11eb-9c76-e8185e88da7b.png)

Pertanyaan dan Tugas

Lengkapi kode program untuk menu lainnya yang ada pada Controller Page, sehingga semua link pada navigasi header dapat menampilkan tampilan dengan layout yang sama.

Hasil tugas

image

Lab12Web

Praktikum 12 - Pemrograman Web (Framework Lanjutan - CRUD)

Langkah-langkah praktikum

Pastikan MySQL server sudah berjalan dan buat sebuah database sebagai berikut: image

Langkah 1

Konfigurasi Database

Membuat konfigurasi hubungan ke database server dengan menggunakan file .env. image

Langkah 2

Membuat Model

Buat file baru pada direktori /app/Models dengan nama ArtikelModel.php image

Langkah 3

Membuat Controller

Buat Controller baru dengan nama Artikel.php pada direktori /app/Controllers. image

Langkah 4

Membuat View

Buat direktori baru dengan nama artikel pada direktori /app/Views, kemudian buat file baru dengan nama index.php. image Lalu buka alamat http://localhost:8080/artikel untuk melihat hasilnya. Tidak ada data yang ditampilkan karena database masih kosong. image

Tambahkan data pada database untuk ditampilkan datanya. image ketikaa di refresh akan muncul tampilan seperti ini. image

Langkah 5

Membuat Tampilan Detail Artikel

Tampilan pada saat judul berita di klik maka akan diarahkan ke halaman yang berbeda. Tambahkan sebuah fungsi baru pada Controller Artikel (/app/Controllers/Artikel.php) dengan nama view(). image

Langkah 6

Membuat View Detail

Buat file baru dalam folder artikel (/app/Views/artikel/) dengan nama detail.php untuk menampilkan halaman detail. image

Langkah 7

Membuat Route

Buka file Routes.php dalam folder (/app/Config/) dan tambahkan routing untuk ke halaman detail artikel. $routes->get('/artikel/(:any)', 'Artikel::view/$1'); image Maka akan tampil halaman dari artikel yang diklik. image

Langkah 8

Membuat Menu Admin

Menu admin adalah untuk proses CRUD data artikel. Buat method atau fungsi baru pada Controller Artikel dengan nama admin_index(). image Kemudian buat file admin_index.php dalam folder (/app/Views/artikel/) untuk tampilan halaman admin. image Kemudian tambahkan routing untuk menu admin sebagai berikut: image

Menu admin dapat diakses dengan alamat http://localhost:8080/admin/artikel image

Langkah 9

Menambah Data Artikel

Tambahkan fungsi/method baru pada Controller Artikel dengan nama add(). image Kemudian buat view untuk form tambah dengan nama form_add.php dalam folder (/app/Views/artikel/). image Tampilannya akan seperti ini image

Langkah 10

Mengubah Data

Tambahkan fungsi/method baru pada Controller Artikel dengan nama edit(). image Kemudian buat view untuk form tambah dengan nama form_edit.php dalam folder (/app/Views/artikel/). image Maka tampilannya akan seperti ini ketika ingin mengubah data. image

Langkah 11

Menghapus Data

Tambahkan fungsi/method baru pada Controller Artikel dengan nama delete(). image

sekian terima kasih

lab11web's People

Contributors

aditya-sultan avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.