Pemrograman Web – Catatan Kecil Arya Dharmaadi's Blog Mon, 01 Nov 2021 09:50:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 /wp-content/uploads/2016/02/cropped-java-65x65.png Pemrograman Web – Catatan Kecil 32 32 AJAX /2021/11/01/ajax/ /2021/11/01/ajax/#respond Mon, 01 Nov 2021 09:50:24 +0000 /?p=1208 Berikut adalah materi lanjutan dari mata kuliah pemrograman internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2021/11/01/ajax/feed/ 0 PHP & MySQL /2020/11/17/php-mysql/ /2020/11/17/php-mysql/#respond Tue, 17 Nov 2020 12:57:48 +0000 /?p=792 Materi ini adalah lanjutan dari materi pemrograman Web.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/11/17/php-mysql/feed/ 0 JQuery /2020/11/14/jquery/ /2020/11/14/jquery/#respond Sat, 14 Nov 2020 03:53:50 +0000 /?p=783 Materi berikut adalah materi lanjutan untuk mata kuliah Pemrograman Internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/11/14/jquery/feed/ 0 JavaScript /2020/11/04/javascript/ /2020/11/04/javascript/#respond Wed, 04 Nov 2020 07:51:33 +0000 /?p=764 Materi ini merupakan materi lanjutan dari seri mata kuliah Pemrograman Internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/11/04/javascript/feed/ 0 Bootstrap /2020/10/20/bootstrap/ /2020/10/20/bootstrap/#respond Tue, 20 Oct 2020 13:22:36 +0000 /?p=736 Berikut adalah materi tentang Bootstrap, sebuah framework CSS yang sangat bermanfaat dalam pembuatan desain sebuah halaman web.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/10/20/bootstrap/feed/ 0 CSS /2020/10/12/css/ /2020/10/12/css/#respond Mon, 12 Oct 2020 12:48:10 +0000 /?p=723 Materi ini merupakan materi lanjutan dari seri mata kuliah Pemrograman Internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/10/12/css/feed/ 0 Pengenalan HTML /2020/10/05/pengenalan-html/ /2020/10/05/pengenalan-html/#respond Mon, 05 Oct 2020 14:53:30 +0000 /?p=697 Berikut merupakan materi tentang dasar-dasar pembuatan dokumen HTML.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/10/05/pengenalan-html/feed/ 0 Pengenalan Web /2020/09/23/pengenalan-web-2/ /2020/09/23/pengenalan-web-2/#respond Wed, 23 Sep 2020 07:55:55 +0000 /?p=677 Materi ini merupakan materi pertama dari seri mata kuliah Pemrograman Internet

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/09/23/pengenalan-web-2/feed/ 0 Tutorial Dasar JQueryMobile (Part 1) /2016/10/05/tutorial-dasar-jquerymobile-part-1/ /2016/10/05/tutorial-dasar-jquerymobile-part-1/#respond Wed, 05 Oct 2016 16:02:38 +0000 /?p=153 [...]]]> JqueryMobile adalah sebuah library CSS dan JS untuk menghasilkan tampilan antarmuka berbasis web yang responsif yang bisa diakses dengan baik, artinya tampilan web tidak berantakan dan tidak hancur walaupun diakses melalui beragam perangkat yang berbeda resolusi layarnya, seperti Desktop, Tablet, maupun Smartphone.

Sebelum memulai tutorial ini, diasumsikan pembaca telah memahami konsep pemrograman HTML, CSS, dan JS dengan baik.

SETUP AWAL JQUERYMOBILE

Untuk mendownload library JQueryMobile, silahkan buka situs resmi JQueryMobile, atau download langsung melalui link berikut: http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip

Anda juga harus mendownload library JQuery yang bisa didownload di http://code.jquery.com/jquery-1.9.0.min.js

Setelah didownload, yang kita akan gunakan adalah:

  1. file jquery.mobile-1.4.5.min.css dan folder images (diletakkan di folder css dari project anda)
  2. file jquery.mobile-1.4.5.min.js dan file jquery.mobile-1.4.5.min.map (diletakkan di folder js dari project anda)
  3. file jquery-1.9.0.min.js (diletakkan di folder js dari project anda)

Kemudian, kita mulai membuat file html, kita namakan index.html.

Struktur File
Struktur File

SETUP HTML

Isi dari file HTML adalah meng-load semua library JQueryMobile (CSS dan JS) pada bagian <head>. Selanjutnya di bagian <body>, kita mulai menggunakan elemen-elemen dasar JQueryMobile untuk membuat header, isi website, dan footer. Isi website akan diisi dengan tampilan widget listview.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery Mobile Framework</title>
        <link rel='stylesheet' href='css/jquery.mobile-1.4.5.min.css'/>
        <script src='js/jquery-1.9.0.min.js' ></script>
        <script src='js/jquery.mobile-1.4.5.js' ></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-theme="b">
                <h1>Latihan</h1>
            </div>
 
            <div data-role="content">
                <ul data-role="listview" data-theme="c">
                    <li><a href="#"  data-transition="flip"><h2>Mengenal MongoDB, Open Source Database NoSQL Document-Oriented</h2></a></li>					
                    <li><a href="#"  data-transition="flip"><h2>7 Plugin Firefox yang Wajib Dimiliki Para Web Developer</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Membuat SpreadSheet Online Dengan dhtmlxSpreadSheet</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a></li> 					
                    <li><a href="#"  data-transition="flip"><h2>Membuat Pretty URL Sederhana Pada ASP.NET 4.0</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Deteksi Perangkat Mobile Dengan Javascript Sederhana</h2></a></li> 
                </ul>
            </div>
 
            <div data-role="footer" data-theme="a">
                <h3>Kuliah Promnet</h3>
            </div>
        </div>
    </body>
</html>

Jika dicoba dijalankan, maka akan menampilkan hasil sebagai berikut:

Tampilan index.html
Tampilan index.html

 

Agar bisa terlihat seperti tampilan mobile di atas, pada browser mozilla, klik kanan dan pilih menu “Inspect Elemen”. Selanjutnya klik tombol “View Responsive Design” pada bagian bawah.

Inspect Elemen pada Mozilla
Inspect Elemen pada Mozilla

 

NEXT?

Selanjutnya anda bisa mencoba membuat widget-widget lain yang akan ditampilkan pada bagian konten website, seperti Tabs, Panel, Popup, Collapsible, dll. Panduan lengkapnya bisa dilihat di http://demos.jquerymobile.com/1.4.5/

Selamat mencoba 🙂

]]> /2016/10/05/tutorial-dasar-jquerymobile-part-1/feed/ 0 Pengenalan Framework CodeIgniter /2015/11/27/pengenalan-framework-codeigniter/ /2015/11/27/pengenalan-framework-codeigniter/#respond Fri, 27 Nov 2015 01:43:58 +0000 /?p=48 [...]]]> Pada materi kali ini, akan dibahas mengenai pengembangan sebuah web yang lebih cepat dan efektif dibandingkan dengan menggunakan cara biasa. Cara yang digunakan adalah dengan memanfaatkan sebuah framework PHP yang terkenal, yaitu Framework CodeIgniter.

APA ITU FRAMEWORK?

?Framework merupakan sebuah KERANGKA KERJA yang MEMUDAHKAN PENGEMBANG aplikasi untuk membangun software sesuai dengan bahasa pemrograman tertentu. ?Framework untuk bahasa pemrograman PHP umumnya terdiri dari SEKUMPULAN FOLDER  yang berisi file-file PHP, dimana file-file tersebut merupakan CLASS LIBRARY, HELPER, PLUGIN, atau KONFIGURASI lainnya.

MENGAPA MENGGUNAKAN FRAMEWORK?

?Pembuatan aplikasi dengan memanfaatkan framework akan sangat membantu dari segi KECEPATAN PENGEMBANGAN dan efisiensi source code aplikasi. ?Hal tersebut disebabkan karena:

  • ?pengembang tinggal mengikuti alur framework, ?
  • pengembang bisa memanfaatkan library dari framework untuk perintah-perintah umum, seperti CRUD (Create Read Update Delete) data, session, dll,
  • setiap project yang dibuat akan memiliki alur yang sama persis, sehingga saat pembuatan project berikutnya bisa meng-copy project sebelumnya, lalu sedikit dimodifikasi

BEDA FRAMEWORK DENGAN CMS

?Framework berbeda jika dibandingkan dengan CMS (Content Management System), walaupun sama-sama mempermudah pembuatan web. ?Pada CMS (misalnya wordpress), pengembang tidak perlu menuliskan code program PHP karena semuanya sudah jadi, tinggal mengatur konten dan tampilannya saja. ?Sedangkan Framework, pengembang harus menuliskan code program PHP sesuai dengan ruang lingkup yang diatur oleh framework.

FRAMEWORK CI

?CodeIgniter (CI) merupakan framework PHP yang tangguh dan sangat mudah dipelajari sehingga diperuntukkan kepada developer PHP yang ingin membangun aplikasi web yang full-featured dengan mudah dan elegan. ?CI hadir dengan dokumentasi yang lengkap dan menyediakan contoh-contoh koding yang bervariasi. ?CI juga memiliki komunitas yang besar sehingga ada banyak forum yang siap membantu ketika  anda merasa kesulitan dalam menggunakan CI.

VERSI FRAMEWORK CI

?Framework CI dibangun oleh EllisLab. ?EllisLab masih terus menyempurnakan Framework CI, baik dari segi keamanan (security), penanganan error atau bug, dan penambahan fitur-fitur. ?Saat ini framework CI sudah berada pada versi 3.0.3 dan biasanya setiap bulan diperbaharui dengan me-release versi terbaru. ?Framework CI bisa didownload secara gratis di situs resminya http://codeigniter.com/

FITUR UTAMA FRAMEWORK CI

  • ?Model-View-Controller Based System
  • ?Query Builder Database Support
  • ?Form and Data Validation
  • ?Security and XSS Filtering
  • ?Session Management
  • ?Email Sending Class. Supports Attachments, HTML/Text email, multiple protocols (sendmail, SMTP, and Mail)
  • ?Image Manipulation Library (cropping, resizing, rotating, etc.)
  • ?File Uploading Class
  • ?FTP Class
  • ?Localization
  • ?Pagination Data
  • ?Encryption
  • ?Search-engine Friendly
  • ?URLs Flexible
  • ?URI Routing
  • ?Large library of “helper” functions

KONSEP MVC

?Framework CI menggunakan metode pengembangan berbasis MVC (Model-View-Controller) sehingga developer wajib memahami konsep MVC sebelum menggunakan Framework CI. ?Konsep MVC adalah konsep pemisahan antara logik dari aplikasi (Controller) dengan tampilan aplikasi (View) dan database aplikasi (Model).

?Umumnya, bagian Model dikerjakan oleh programmer sekaligus database analyst, dimana code-code di bagian ini merupakan code struktur data yang berisi koneksi dan fungsi di dalam pengolahan database. ?Sedangkan View dikerjakan oleh designer html, css, dan js karena code-code di bagian ini untuk menampilkan tampilan web yang menarik dan interaktif. ?Terakhir, Controller dikerjakan oleh programmer inti PHP karena menangani hubungan Model dengan View, algoritma, logic, HttpRequest, dll.

Arsitektur MVC pada CI
Arsitektur MVC pada CI

 

STRUKTUR DIREKTORI CI

Setelah anda berhasil mendownload framework CI (dalam bentuk rar), maka ekstrak-lah file tersebut dan simpan di directory localhost anda. Berikut merupakan folder-folder yang terdapat di dalam framework CI.


ci

 

Terdapat 3 folder utama pada framework CI. Folder ‘application’ merupakan area kerja dari pengembang web karena code-code yang akan dikembangkan akan dituliskan di direktori tersebut. Kemudian folder ‘system’ merupakan folder yang mengandung definisi kelas-kelas inti, helper, dan lain-lain yang sudah dibuat oleh pengembang CI. Terakhir, folder ‘user_guide’ merupakan direktori yang berisi tutorial atau dokumentasi cara penggunaan framework CI.

Untuk pembuatan website, kita hanya diperkenankan untuk memodifikasi folder ‘application’. Isi dari folder tersebut adalah sebagai berikut:

dir application ci

FLOWCHART FRAMEWORK CI

appflowchart

MEMULAI MENGGUNAKAN CI

Secara umum, tahapan untuk menggunakan framework CI pertama kali adalah sebagai berikut:

  1. Konfigurasi Framework CI
  2. Buat Library (jika membutuhkan library tambahan)
  3. Persiapkan Model
  4. Persiapkan Controller
  5. Persiapkan View

KONFIGURASI CI

  1. Buka folder config

konfig ci

  1. Buka file config.php
  2. Isilah  $config[‘encryption_key’]
  3. Buka file database.php
  4. Isilah hostname, username, password, database
  5. Buka file route.php
  6. Tentukan $route[‘default_controller’]

BUAT LIBRARY

?Jika anda ingin membuat sebuah library, silahkan buka folder ‘libraries’. ?Namun, saat ini penulisan library baru belum dibutuhkan.

PERSIAPKAN MODEL

  1. ?Buka folder ‘Models’ di folder ‘application’
  2. ?Buat file baru, misal ‘user_model.php’
  3. ?Buka file tersebut dan deklarasi kelas dengan nama yang sama dengan nama file tersebut
  4. ?Kelas yang baru dideklarasikan wajib menurunkan kelas ‘CI_model’
<?php

class User_model extends CI_Model {

	var $tabel = "user";
	var $primary_key = "userid";

	function User_model(){
		 parent::__construct();
	}
	
	function get_data_by_pk($username){
		$this->db->select('*');
		$this->db->where($this->primary_key,$username);
		$result = $this->db->get($this->tabel);
		
		return $result->row();
	}
	
	
	function insert($data){
		return $this->db->insert($this->tabel,$data);	
	}
	
	function update($username,$data){
		$this->db->where($this->primary_key,$username);
		return $this->db->update($this->tabel,$data);
	}
	
	function delete($username){
		$this->db->where($this->primary_key,$username);
		return $this->db->delete($this->tabel);
	}
}

?>

PERSIAPKAN CONTROLLER

  1. ?Buka folder ‘Controllers’ di folder ‘application’
  2. ?Buat file baru, misal ‘user.php’
  3. ?Buka file tersebut dan deklarasi kelas dengan nama yang sama dengan nama file tersebut
  4. ?Kelas yang baru dideklarasikan wajib menurunkan kelas ‘CI_Controller’
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class User extends CI_Controller {
	 
	function __construct(){
		parent::__construct();
		$this->load->model('user_model','','TRUE');
		date_default_timezone_set("Asia/Singapore");
	}
	
	public function index(){		
		$this->load->view('home');
	}
	
	public function register(){
		$item['email'] = $this->input->post('email',true);
		$item['password'] = sha1($this->input->post('password',true));
		$item['nama_lengkap'] = $this->input->post('nama_lengkap',true);
		$item['alamat'] = $this->input->post('alamat',true);
		$item['phone'] = $this->input->post('phone',true);		
		$item['datetime'] = date("Y-m-d H:i:s");
		$item['userid'] = strtotime($item['datetime']);
		
		$this->user_model->insert($item);					
		redirect('/', 'refresh');
	}
}

PERSIAPKAN VIEW

  1. ?Buka folder ‘Views’ di folder ‘application’
  2. ?Buat file baru dengan nama misalnya ‘home.php’
  3. ?Isilah file tersebut dengan script-script html biasa untuk menampilkan halaman web
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Halaman Awal</title>
</head>
<body>
<div id="container">
	<h1>Registrasi</h1>
	<form method="post" action="<? echo base_url().'index.php/'?>user/register">
		<input type="email" id="email" name="email" />
		<input type="text" id="nama_lengkap" name="nama_lengkap" />
		<input type="password" id="password" name="password" />
		<input type="text" id="phone" name="phone" />
		<textarea name="alamat" id="alamat" ></textarea>		
		<button type="submit">SEND</button>
	</form>
</div>
</body>
</html>

PEMANGGILAN FUNGSI 

?Pemanggilan fungsi yang sudah dibuat pada class Controller bisa dipanggil melalui url dengan format:

host/index.php/class_name/function_name/data

Contoh:

http://locahost/codeigniter/index.php/user/index

PENUTUP

?Selain ringan dan cepat, CodeIgniter memiliki dokumentasi yang super lengkap disertai dengan contoh implementasi kodenya, sehingga hal ini menjadi salah satu alasan kuat mengapa banyak orang memilih CodeIgniter sebagai framework pilihannya.

?Slide materi di sini hanya membahas tahap dasar penggunaan CodeIgniter. Untuk pemanfaatan fitur-fitur unggulan CodeIgniter yang lainnya akan dibahas di slide yang lain.

NEXT . . .

?Web Service dan XML

DOWNLOAD PDF

Jika anda tertarik untuk membaca materi ini dalam bentuk powerpoint atau PDF, silahkan download secara GRATIS di sini.

REFERENSI

?http://codeigniter.com/

?https://ellislab.com/codeigniter

]]> /2015/11/27/pengenalan-framework-codeigniter/feed/ 0