Category Archives: Pemgrograman Web

Pengenalan Unsur Visual Desain Website

Posted on by

Unsur Visual pada Desain Website dapat di kelompokkan dalam konsep hierarki visual dan struktur layout :

Hierarki Visual

Tujuan dari Hierarki Visual?

Hierarki Visual memberikan fokus untuk menonjolkan elemen-elemen yang menarik perhatian mata. So, Website yang terstruktur dengan baik dapat menyampaikan informasi secara lebih efektif. Pengunjung website dapat dengan mudah mengerti apa yang harus dilihat dan dibaca berikutnya.

Contoh Hierarki Visual

Ini adalah contoh penulisan dalam poster tanpa penggunaan prinsip hierarki. Bagaimana? Pasti kalian bingung harus membaca dari bagian yang mana dulu, ini dikarenakan semua ukuran tulisan nya sama.

Tidak adanya titik fokus atau penekanan pada tulisan dapat menyebabkan audiens kebingungan dalam memahami tulisan mana yang harus dibaca pertama kali dan mana yang harus dibaca selanjutnya.

Contoh Non Hierarki Visual

Ini adalah contoh yang sudah menggunakan prinsip hierarki dalam tulisannya. Bagaimana? pasti sudah lebih enak untuk dilihat kan. Audiens pun akan lebih mudah mengerti apa yang harus dilihat pertama kali dan dibaca berikutnya, seperti dimulai dari judul dan pelaksanaan workshop, lalu lanjut ke pembicara, hingga seterusnya ke narahubung.

Konsep Dasar Web

Posted on by

Perkembangan Web

Pengertian Situs Web

ž Situs web merupakan kumpulan dari halaman web yang sudah di publikasikan di jaringan internet dan memiliki domain/URL yang dapat di akses semua pengguna Internet dengan cara mengetikkan alamatnya.

HTTP

ž HTTP (HyperTextTransfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web(WWW).

WWW

ž World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi

Perkembangan Web

Web 1.0, yaitu teknologi Web generasi pertama yang merupakan revolusi baru di dunia Internet karena telah mengubah cara kerja dunia industri dan media. Contoh : Situs berita “cnn.com” atau situs belanja “Bhinneka.com”.

ž Web 2.0, yaitu pertama kalinya diperkenalkan oleh O’Reilly Media pada tahun 2004 sebagai teknologi Web generasi kedua yang mengedepankan kolaborasi dan sharing informasi secara online. Contoh : Situs jejaring sosial facebook.com

ž Web 3.0, yaitu teknologi web lebih ke arah Web Cerdas atau Web dengan Engine Kecerdasan Buatan, yang lebih memudahkan user dalam berinteraksi. Contoh : Web Semantik dan Cloud Computing.

ž Web 4.0, yaitu private secretary dalam bentuk organisme buatan. Sebuah alat dimana aplikasi merekam rutinitas yang kita lakukan yang seluruh rutinitas tersebut bisa diketahui oleh aplikasi komputer/program/tools/device yang kita miliki yang dijalankan secara online. Web 4.0 juga bisa digunakan untuk membantu dalam pencarian informasi, penyimpanan histori pencarian, ataupun mempertemukan orang orang yang mencari informasi sama. AI Web

Web Semantic : SIOC ( http://sioc-project.org/ ) Adalah komunitas yang berusaha mewujudkan semantic website yang tengah berjuang membantu kita menciptakan web cerdas yang mana kelak pencarian info di internet menjadi jauh – jauh sangat mudah

Cloud Computing : https://cloud.google.com/

Materi bisa dilihat pada elearning : https://elearning.uma.ac.id/mod/resource/view.php?id=138094

Pemrograman Web I : Pengenalan Web Dasar #1

Posted on by

Pemrograman Web I : Pengenalan Web Dasar Pertemuan #1

Video :

Assalamu’alaikum warahmatullahi wabarakatuh

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Berikut adalah penjelasan tentang materi pemrograman web I, pada pertemuan 1 menjelaskan dasar pengenalan sejarah web, teknologi dan arsitechture web saat ini.

Mata kuliah ini diajarkan untuk mencapai kompetensi pembuatan dan pengembangan aplikasi berbasis web melalui pemahaman teknologi jaringan, internet, bahasa pemrograman dan berbagai kolaborasi teknologi sehingga mahasiswa akan mampu menciptakan/membuat dan mengembangkan aplikasi berbasis web yang bermanfaat di berbagai bidang dengan teknologi terkini mampu memahami Teknologi Jaringan Komputer dan Web, Front End, Backend  dan FullStack Programming , Jenis Inplementasi dari Bahasa pemrograman dan Arsitektur Web, model struktur HTML dan CSS, konsep Web Dinamis, Client Side Scripting, Javascript, Server Side Scripting, PHP :  Database MySQL, Operasi Database pada PHP, Framework Pemrograman Web : MVC, CMS (Content Management System).

Download [2.09 MB]

Inheritance : PHP & Object Oriented Programming (OOP)

Posted on by

Inheritance : Pada Object Oriented Programming (OOP) dengan Pemrograman PHP

Inheritance atau pewarisan adalah suatu cara untuk membuat sebuah kelas yang baru dengan menggunakan kelas lain yang sebelumnya sudah dibuat. Pada hubungan inheritance, sebuah class turunan mewarisi kelas leluhur (parent class). mewarisi, maka semua atribut dan method class dari induk akan dibawa (kecuali  yang bersifat private), secara intrinsik menjadi bagian dari class anak. keuntungan yang didapat dari inheritance menambah fitur baru pada kelas anak dan mengubah atau mengganti fitur yang diwarisi dari kelas parent

berikut contoh dengan php :

<?php  
/* inheritance.php */  
class Bapak {  
  private $nama = "Bapak";  
  
  function Bapak($n) {  
    $this->nama = $n;  
  }  
  
  function Hallo() {  
    echo "Halo, saya $this->nama <br>";  
  }  
}  
  
class Anak extends Bapak {  
  function Hai(){  
    echo "hai dari kelas anak";  
  }  
}  
  
$test = new Anak("Anak dari Bapak");  
$test->Hallo();  
$test->Hai();  
?>

Hasil :

Halo, saya Anak dari Bapak 
 hai dari kelas anak

Continue reading →

Pemrograman Web II : PHP & Object Oriented Programming (OOP)

Posted on by

PHP & Object Oriented Programming (OOP)

Tujuan :

  1. Memahami Pemrograman OOP dengan menggunakan PHP
  2. Mampu mengimplementasikan Pembuatan Class, Object, Inheritance dan Method

Syarat utama untuk menguasai CodeIgniter adalah memahami PHP dan konsep Object Oriented Programming. Pada bab ini kita akan membahas sedikit mengenai PHP dan OOP.

Apa sih Object Oriented Programming (OOP)?

Object Oriented Programming (OOP) merupakan paradigma pemrograman yang berorientasikan kepada obyek. Semua data dan fungsi pada paradigma ini dibungkus dalam kelas-kelas atau obyek-obyek. Bandingkan dengan logika pemrograman terstruktur, setiap obyek dapat menerima pesan, memproses data, dan mengirim pesan ke obyek lainnya. OOP diciptakan untuk mengatasi keterbatasan pada bahasa pemrograman tradisional. Konsep dari OOP sendiri adalah semua pemecahan masalah dibagi ke dalam obyek. Dalam konsep OOP data dan fungsi-fungsi yang akan mengoperasikannya digabungkan menjadi satu kesatuan yang dapat disebut sebagai obyek.

Apa itu Object ? Continue reading →

Pemrograman Web : Membuat CRUD Data Mahasiswa (Halaman Data Admin) #4

Posted on by

Mahalaman Administrator setelah berhasil login. pada halaman ini memiliki modul untuk mengecek apakah session terdaftar atau tidak, jika session tikda tedatar maka redirect ke halaman login atau index.php. dan jika diarah kan ke halaman index.php dengan mengetikkan http://localhost/demo/index.php maka akan redirect ke halaman admin, karena session masih ad.

File : cek_session.php

<?php
//cek session, jika tidak ada kembalikan ke halaman login
session_start();
if(!isset($_SESSION['user_sesion'])){
  header('location: index.php');
}
?>

Halaman Data mahasiswa,

Data Mahasiswa

File : data_mahasiswa.php

Continue reading →

Pemrograman Web : Membuat CRUD Data Mahasiswa (Struktur Database) #2

Posted on by

Struktur Database pada projek Data Mahasiswa menggunakan 3 database dasar :

Tabel Users

Tabel Users  : Digunakan untuk login ke dalam halaman Administrator

SQL :

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL,
  `user_name` varchar(30) NOT NULL,
  `user_password` varchar(50) NOT NULL,
  `user_level` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `users`
  ADD PRIMARY KEY (`user_id`);

ALTER TABLE `users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

INSERT INTO `users` (`user_id`, `user_name`, `user_password`, `user_level`) VALUES
(1, 'rizkimuliono', '827ccb0eea8a706c4c34a16891f84e7b', 1);

Continue reading →

Pemrograman Web : Membuat CRUD Data Mahasiswa (Struktur Project) #1

Posted on by

Dalam Tutorial kali ini kita akan menyelesaikan proyek mini dengan kasus manajemen data mahasiswa, dalam proyek kali ini mahasiswa memiliki relasi ke tabel prodi, pada tambah data memiliki fitur upload foto dengan fungsi php move_uploaded_file dan fungsi upload file foto dengan type data mysql BLOB.

Struktur file project awal adalah folder DEMO di dalam htdocs, menggunakan framework CSS Bootstrap 3,  lebih lengkap seperti berikut :

Struktur Proyek