Wednesday, February 20, 2019

Membuat Struktur Organisasi dengan php dan Mysql

Assalamualakum...
Apa kabar sahabat pojok code, semoga dalam keadaan baik baik saja. Sahabat pernah tidak kamu merasa kesulitan ketika ingin membuat tamilan struktur organisasi yang di load langsung dari database, dengan kamu load langsung dari database struktur bisa menjadi lebih dinamis dan bisa di ubah-ubah tanpa merubah codingannya.
Hampir setiap projek yang berhubungan dengan system apalagi system yang dipakai di sebuah perusahaan atau organisasi, pasti membutuhkan tampilan struktur organisasi. Berdasarkan hal itu saya akan share ke kalian cara membuat struktur organisasi load dari DB mengunakan PHP dan MySql atau mariaDB. Meskipun untuk postingan kaliini belum disertai insert dan updatenya tapi hanya load langsung dari data yang sudah disimpan di database, mungkin bagi kamu yang kreatif silahkan di kembangkan sendiri.

Daftar isi postingan
  1. Gambaran umum, suah di lakukan diatas.
  2. Material dan bahan pendukung
  3. Coding dan programming.
  4. Testing dan preview
  5. File Latihan
Bagian deskripsi secara umum saya kira cukup diatas, sekarang kita akan siapkan apa saja material pendukung untuk membuat projek ini.
  • JQuery bisa di download dari situs resminya.
  • Lib ORGChart, saya lupa linknya tapi bagi kami tinggal download saja dari file latihan yang sudah disiapka dibawah.
  • Database MariaDb
  • WAMP server atau XAMPP untuk menjalankan PHP nya.
Setelah semua material pendukung dikumpulkan satnya kita membuat projek baru, oh iya sampai lupa, sebelum kita buat projek baru kita buat dulu databasenya dan input datanya, ikuti langkah-langkah dibawah ini.
buat database baru (namanya terserah) dan tabel baru.

 CREATE TABLE IF NOT EXISTS `simpeople` (
  `people_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `telepon` varchar(15) DEFAULT NULL,
  `address` varchar(250) NOT NULL,
  `status_id` varchar(100) NOT NULL,
  `join_date` date NOT NULL,
  `active_status` varchar(5) DEFAULT NULL,
  `end_date` varchar(45) DEFAULT NULL,
  `email` varchar(45) DEFAULT NULL,
  `komitment` float DEFAULT NULL,
  `username` varchar(250) DEFAULT NULL,
  `password` varchar(250) DEFAULT NULL,
  `cabang` int(11) DEFAULT NULL,
  PRIMARY KEY (`people_id`)
) ENGINE=InnoDB AUTO_INCREMENT=90 DEFAULT CHARSET=utf8;
Input data nya.

INSERT INTO `simpeople` (`people_id`, `name`, `telepon`, `address`, `status_id`, `join_date`, `active_status`, `end_date`, `email`, `komitment`, `username`, `password`, `cabang`) VALUES
 (1, 'Asep Komarudin', '082121232730', 'Jl. Flamboyan No. 44 Srengseng Kembangan Jakarta Barat', 'Karyawan', '2017-04-04', 'on', NULL, 'aasseepp@gmail.com', 50000, 'asep', '*A4B6157319038724E3560894F7F932C8886EBFCF', 2),
 (2, 'Arga', '1234', 'binus', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (3, 'Muhammad Ikhsan', '1234', 'DM', 'Pelajar', '2014-04-01', 'on', NULL, 'dumy@test.com', 100000, NULL, NULL, NULL),
 (4, 'Dedy Suginato', '1234', 'DM', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (5, 'Asep Rusmana', '1234', 'jakarta', 'Pelajar', '2017-04-02', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (6, 'Nanang', '123', 'nihil', 'Pelajar', '2017-04-02', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (7, 'Muhammad Karno Utomo', '123', 'Srengseng', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (8, 'Yustian', '123', 'Jl. Flamboyan No. 59 Srengseng Kembangan Jakarta Barat', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 100000, NULL, NULL, NULL),
 (9, 'Hersa', '123', 'DM', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (10, 'Dedy Sudrajat', '123', 'Al-ansor', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (11, 'Muhammad Farid', '13213', 'Dm', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (12, 'Santoso', '1234', 'Kontrakan Pak Roto', 'Pelajar', '2014-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (13, 'Faisal', '1234', 'DM', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (14, 'Edy Mohtar', '1234', 'DEkat Musola Ataawun', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 15000, NULL, NULL, NULL),
 (15, 'Tarno', '1234', 'Kontrakan Pak RT', 'Pelajar', '2014-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (16, 'Sudarmono', '1234', 'Kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (17, 'Hamdani', '1234', 'Kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (18, 'Syarif', '1234', 'Kosong', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (19, 'Hudan', '1234', 'Kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 30000, NULL, NULL, NULL),
 (20, 'Ayubi', '1234', 'Kembangan', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (21, 'Alvin STY', '1234', 'Dekat mesjid Al-Huda', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 50000, 'alvin', '*FBFD34E4561C6E9863547D3521D7A090554E00E6', NULL),
 (22, 'Rizki', '1234', 'Nissan', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (23, 'Huda', '1234', 'Kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (24, 'Wahyu UBL', '1234', 'Kosong (UBL)', 'HU', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (25, 'Adiat', '1234', 'Kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (26, 'Kurdiono', '1234', 'Kontrakan Bu Roto', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (27, 'Ade', '1234', 'Masih Koasong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 50000, 'ase', '*246788DFD1F79D9635A58F8121B32F00A8A0D065', 2),
 (28, 'Alfin Bin Nur', '1234', 'DM', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (29, 'Umar DM', '1234', 'DM', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (30, 'Slamet Tri Waluyo', '1234', 'Belakang Ust. Sofar', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (31, 'Wahyu Andri Irawan', '1234', 'Belakang UST. Sofar', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (32, 'Maman', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (33, 'Agung Sunaryadi', '1234', 'Belakang DM', 'Pelajar', '2015-04-01', 'off', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (34, 'Hafidz', '1234', 'Dekat Mesjid ', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (35, 'Nino', '1234', 'Dekat Mesjid Almutaakhirin', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (36, 'Adi Santoso', '1234', 'Dekat Mesjid At-taawun', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 100000, NULL, NULL, NULL),
 (37, 'Rully Van Hod Nababn', '1234', 'DM', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (38, 'Hery Siswanto', '1234', 'DM', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 40000, NULL, NULL, NULL),
 (39, 'Arif Nissan', '1234', 'Ciledug', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (40, 'Sadam Mubarok', '1234', 'Palmerah', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (41, 'Husen', '123', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 40000, NULL, NULL, NULL),
 (42, 'Ajang Setiawan', '1234', 'Jalan Tolo', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 50000, 'ajang', '*A4B6157319038724E3560894F7F932C8886EBFCF', 2),
 (43, 'mas Ahmad', '1234', 'kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (44, 'Mas Tarjo', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (45, 'pak Ade Rohana', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (46, 'H. Iskandar', '1234', 'jl. Srengseng', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (47, 'H. Muhyidin', '1234', 'Tanggerang', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (48, 'Muhaimin', '1234', 'kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (49, 'Surya', '1234', 'kosong', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (50, 'Pak Asep', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (52, 'Pak Pri', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (53, 'Deni', '1234', 'Kontrakan Pak RT', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (54, 'Hendra DM', '1234', 'DM', 'Pelajar', '2016-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (55, 'Awaludin', '1234', 'DM', 'Pelajar', '2015-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (56, 'Ahmad', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (57, 'Ardianto', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (58, 'Ahmad Yani', '1234', 'kosong', 'Pelajar', '2017-04-07', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (59, 'Muslim', '1234', 'kosong', 'Karyawan', '2011-04-01', 'on', NULL, 'dumy@test.com', 100000, 'muslim', '*A4B6157319038724E3560894F7F932C8886EBFCF', NULL),
 (60, 'Harits', '1234', 'kosong', 'Karyawan', '2010-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (61, 'Sulaiman', '1234', 'kembangan', 'Karyawan', '2010-04-01', 'on', NULL, 'dumy@test.com', 75000, 'sulaiman', '*2FADBE3B28E3DF0BE9AAC4D06472A4F12C6BC342', NULL),
 (62, 'Rahmadi', '1234', 'jakarta Timur', 'Karyawan', '2012-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (63, 'Suryadi', '1234', 'palmerah', 'Karyawan', '2011-04-01', 'on', NULL, 'dumy@test.com', 200000, NULL, NULL, NULL),
 (64, 'Rustandi', '1234', 'kosong', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (65, 'Sumarna', '1234', 'kosong', 'Karyawan', '2012-04-02', 'on', NULL, 'dumy@test.com', 30000, NULL, NULL, NULL),
 (66, 'Gunawan', '1234', 'kosong', 'Karyawan', '2010-04-01', 'on', NULL, 'dumy@test.com', 125000, 'gunawan', '*A4B6157319038724E3560894F7F932C8886EBFCF', 2),
 (67, 'Nurjaman', '1234', 'kosong', 'Karyawan', '2012-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (68, 'Parno', '123', 'kosong', 'Karyawan', '2014-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (69, 'Supriono', '1234', 'kosong', 'Karyawan', '2011-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (70, 'Imam', '1234', 'kosong', 'Karyawan', '2010-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (71, 'Firman', '1234', 'seskoal', 'Karyawan', '2009-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (72, 'Fatur Rohman', '1234', 'kosong', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 90000, NULL, NULL, NULL),
 (73, 'KH. Sofar Mawardi', '1234', 'Srengseng Kembangan', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 100000, NULL, NULL, NULL),
 (74, 'Musoffa', '1234', 'Kontakan Ibu ZRoto', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 40000, NULL, NULL, NULL),
 (75, 'Muhammad Nazib', '1234', 'DM', 'Karyawan', '2014-04-01', 'on', NULL, 'dumy@test.com', 40000, NULL, NULL, NULL),
 (76, 'Partono', '1234', 'Belakang DM', 'Karyawan', '2017-04-07', 'on', NULL, 'dumy@test.com', 40000, NULL, NULL, NULL),
 (77, 'Rohmat', '1234', 'srengseng kembangan', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 50000, NULL, NULL, NULL),
 (78, 'Untung', '1234', 'Dekang rumah Ustad Soffar', 'Karyawan', '2013-04-01', 'on', NULL, 'dumy@test.com', 30000, NULL, NULL, NULL),
 (79, 'Mahmudin', '1234', 'Kembangan', 'Karyawan', '2010-04-01', 'on', NULL, 'dumy@test.com', 0, NULL, NULL, NULL),
 (80, 'Didik Dm', '1234', 'DM', 'HU', '2016-04-01', 'on', NULL, 'test@gmail.com', 0, NULL, NULL, NULL),
 (81, 'Tolhah Ubayidilah', '1234', 'DM', 'HU', '2016-04-01', 'on', NULL, 'test@gmail.com', 0, NULL, NULL, NULL),
 (82, 'Alif DM', '1234', 'dekat mesjid aluswah', 'HU', '2016-04-01', 'off', NULL, 'test@gmail.com', 0, 'alif', '*A4B6157319038724E3560894F7F932C8886EBFCF', 2),
 (83, 'Unu', '1234', 'bogor', 'Pelajar', '2016-01-01', '1', NULL, 'test@gmail.com', 50000, NULL, NULL, NULL),
 (84, 'Firman Nissan', '1234', 'nissan daanmogot', 'Kontakan', '1900-01-01', 'off', NULL, 'test@gmail.com', 0, NULL, NULL, NULL),
 (85, 'Rudi Hidayat', '085697513898', 'cengkareng', 'Pelajar', '2016-01-05', '1', NULL, 'test@gmail.com', 100000, NULL, NULL, NULL),
 (87, 'Dede Iskandar', '121313', 'DM', 'Pelajar', '2016-05-03', 'off', NULL, 'qweqe', 0, NULL, NULL, NULL),
 (88, 'Eko DM', '1234', 'DM', 'HU', '2016-06-01', 'off', NULL, 'test@gmail.com', 0, 'eko', '*A4B6157319038724E3560894F7F932C8886EBFCF', NULL),
 (89, 'Zaki', '1234', 'Samping Attaawun', 'HU', '2016-06-01', 'off', NULL, 'test@gmail.com', 0, 'zaki', '*A4B6157319038724E3560894F7F932C8886EBFCF', NULL);
tabel posisi

CREATE TABLE IF NOT EXISTS `simposisi` (
  `posisi_id` int(11) NOT NULL AUTO_INCREMENT,
  `kode_posisi` varchar(50) NOT NULL,
  `nama_posisi` varchar(200) NOT NULL,
  `parent` int(11) DEFAULT NULL,
  `parent_path` varchar(200) DEFAULT NULL,
  `cabang_id` int(11) NOT NULL,
  `active_status` int(11) DEFAULT '1',
  `people_id` int(11) DEFAULT '0',
  `pembinaan` int(11) DEFAULT NULL,
  `hari` varchar(50) DEFAULT NULL,
  `jam` varchar(10) DEFAULT NULL,
  `kitab` varchar(200) DEFAULT NULL,
  PRIMARY KEY (`posisi_id`),
  KEY `FK__simcabang` (`cabang_id`)
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=latin1;
Isi tabel posisi

INSERT INTO `simposisi` (`posisi_id`, `kode_posisi`, `nama_posisi`, `parent`, `parent_path`, `cabang_id`, `active_status`, `people_id`, `pembinaan`, `hari`, `jam`, `kitab`) VALUES
 (1, 'KBJ-MGR', 'Manager', 0, '', 2, 1, 61, 0, '', '', ''),
 (3, 'KBJ-AMN-1', 'Asmen', 1, '1', 2, 1, 59, 0, '', '', ''),
 (5, 'KBJ-AMN-2', 'Asmen', 1, '1', 2, 1, 66, 0, '', '', ''),
 (6, 'KBJ-MSF-1', 'Pengajar', 3, '1,3', 2, 1, 66, 1, 'Ahad', '07:00', 'Mafahim'),
 (7, 'KBJ-MSF-2', 'Pengajar', 3, '1,3', 2, 1, 1, 1, 'Ahad', '05:00', 'Materi Dasar Islam'),
 (8, 'KBJ-MSF-3', 'Pengajar', 5, '1,5', 2, 1, 73, 1, 'Selasa', '18:00', 'Mapahim'),
 (9, 'KBJ-MSF-4', 'Pengajar', 5, '1,5', 2, 1, NULL, NULL, NULL, NULL, NULL),
 (10, 'KBJ-PLJ-1', 'Pelajar', 6, '1,3,6', 2, 1, 33, 0, '', '', ''),
 (11, 'KBJ-MAL', 'Maliah', 1, '1', 2, 1, 1, 0, '', '', ''),
 (13, 'PE-01', 'Pelajar', 6, '1,3,6', 2, 1, 36, 0, '', '', ''),
 (14, 'PE-02', 'Pelajar', 7, '1,3,7', 2, 1, 82, 0, '', '', ''),
 (15, 'KBJ-PE-003', 'Pengajar', 3, '1,3', 2, 1, 21, 1, 'Sabtu', '16:00', 'Nizomul Islam'),
 (16, 'KBJ-PEL-004', 'Pelajar', 15, '1,3,15', 2, 1, 39, 0, '', '', ''),
 (17, 'KBJ-PEN-0003', 'Pengajar', 3, '1,3', 2, 1, 1, 1, 'Ahad', '07:00', 'Materi Dasar Islam'),
 (18, 'KBJ-PEL-0004', 'Pelajar', 7, '1,3,7', 2, 1, 80, 0, '', '', ''),
 (19, 'KBJ-PLJ-0012', 'Pelajar', 7, '1,3,7', 2, 1, 87, 0, '', '', ''),
 (20, 'KBJ-PLJ-0005', 'Pelajar', 7, '1,3,7', 2, 1, 81, 0, '', '', ''),
 (21, 'KBJ-DRS-0001', 'Pelajar', 8, '1,5,8', 2, 1, 47, 0, '', '', ''),
 (22, 'KBJ-DRS-0002', 'Pelajar', 8, '1,5,8', 2, 1, 46, 0, '', '', ''),
 (23, 'PE_KBJ_001', 'pelajar', 17, '1,3,17', 2, 1, 33, 0, '', '', ''),
 (24, 'KBJ_PEL', 'Pelajar', 7, '1,3,7', 2, 1, 89, 0, '', '', ''),
 (25, 'KBJ_PEL_01', 'Pelajar', 7, '1,3,7', 2, 1, 88, 0, '', '', ''); 
Setelah itu buatlah projek baru dengan struktur seperti gambar dibawah ini.
Isi file DBConnection seperi code dibawah ini. untuk nama databse user dan passwordnya silahkan di sesuaikan dengan setting yang ada di komputer kamu.

class DBConnection {
    private $host = "localhost";
    private $dbName = "latihan3";
    private $usr = "root";
    private $pwd = "root";
    public function getConnection() {
        try {
            $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        } catch (PDOException $e) {
            echo "Connection failed: " . $e->getMessage();
        }
        return $conn;
    }
}

Selanjutnya buatlah entity class untuk people.php dan Posisi.php

class People {
    private $peopleId;
    private $name;
    private $telepon;
    private $adress;
    private $statusId;
    private $joindate;
    private $activeStatus;
    private $endDate;
    private $email;
    private $komitment;
    private $username;
    private $password;
    private $cabang;
    
    function getCabang() {
        return $this->cabang;
    }

    function setCabang($cabang) {
        $this->cabang = $cabang;
    }
    
    function getUsername() {
        return $this->username;
    }

    function getPassword() {
        return $this->password;
    }

    function setUsername($username) {
        $this->username = $username;
    }

    function setPassword($password) {
        $this->password = $password;
    }
    
    function getKomitment() {
        return $this->komitment;
    }

    function setKomitment($komitment) {
        $this->komitment = $komitment;
    }

    function getPeopleId() {
        return $this->peopleId;
    }

    function getName() {
        return $this->name;
    }

    function getTelepon() {
        return $this->telepon;
    }

    function getAdress() {
        return $this->adress;
    }

    function getStatusId() {
        return $this->statusId;
    }

    function getJoindate() {
        return $this->joindate;
    }

    function getActiveStatus() {
        return $this->activeStatus;
    }

    function getEndDate() {
        return $this->endDate;
    }

    function getEmail() {
        return $this->email;
    }

    function setPeopleId($peopleId) {
        $this->peopleId = $peopleId;
    }

    function setName($name) {
        $this->name = $name;
    }

    function setTelepon($telepon) {
        $this->telepon = $telepon;
    }

    function setAdress($adress) {
        $this->adress = $adress;
    }

    function setStatusId($statusId) {
        $this->statusId = $statusId;
    }

    function setJoindate($joindate) {
        $this->joindate = $joindate;
    }

    function setActiveStatus($activeStatus) {
        $this->activeStatus = $activeStatus;
    }

    function setEndDate($endDate) {
        $this->endDate = $endDate;
    }

    function setEmail($email) {
        $this->email = $email;
    }
}

class Posisi {
    private $posisiId;
    private $kodePosisi;
    private $namaPosisi;
    private $parent;
    private $parentPath;
    private $cabangId;
    private $activeStatus;
    private $peopleId;
    private $pembinaan;
    private $hari;
    private $jam;
    private $kitab;
    
    function getPembinaan() {
        return $this->pembinaan;
    }

    function getHari() {
        return $this->hari;
    }

    function getJam() {
        return $this->jam;
    }

    function getKitab() {
        return $this->kitab;
    }

    function setPembinaan($pembinaan) {
        $this->pembinaan = $pembinaan;
    }

    function setHari($hari) {
        $this->hari = $hari;
    }

    function setJam($jam) {
        $this->jam = $jam;
    }

    function setKitab($kitab) {
        $this->kitab = $kitab;
    }

        
    function getPeopleId() {
        return $this->peopleId;
    }

    function setPeopleId($peopleId) {
        $this->peopleId = $peopleId;
    }

        
    function getPosisiId() {
        return $this->posisiId;
    }

    function getKodePosisi() {
        return $this->kodePosisi;
    }

    function getNamaPosisi() {
        return $this->namaPosisi;
    }

    function getParent() {
        return $this->parent;
    }

    function getParentPath() {
        return $this->parentPath;
    }

    function getCabangId() {
        return $this->cabangId;
    }

    function getActiveStatus() {
        return $this->activeStatus;
    }

    function setPosisiId($posisiId) {
        $this->posisiId = $posisiId;
    }

    function setKodePosisi($kodePosisi) {
        $this->kodePosisi = $kodePosisi;
    }

    function setNamaPosisi($namaPosisi) {
        $this->namaPosisi = $namaPosisi;
    }

    function setParent($parent) {
        $this->parent = $parent;
    }

    function setParentPath($parentPath) {
        $this->parentPath = $parentPath;
    }

    function setCabangId($cabangId) {
        $this->cabangId = $cabangId;
    }

    function setActiveStatus($activeStatus) {
        $this->activeStatus = $activeStatus;
    }
}

Sekarang buatlah code pada file index

<?php
require_once './DBConnection.php';
require_once './People.php';
require_once './Posisi.php';

$conn= new DBConnection();
$connection=$conn->getConnection();

function getPeopleById($id,$connection) {
    $people = new People();
    $sql = "select * from simpeople where people_id='$id'";
    $stmt = $connection->prepare($sql);
    $stmt->execute();
    if ($v = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $people = new People();
        $people->setPeopleId($v['people_id']);
        $people->setName($v['name']);
        $people->setTelepon($v['telepon']);
        $people->setAdress($v['address']);
        $people->setStatusId($v['status_id']);
        $people->setJoindate($v['join_date']);
        $people->setEmail($v['email']);
        $people->setEndDate($v['end_date']);
        $people->setKomitment($v['komitment']);
        $people->setActiveStatus($v['active_status']);
        $people->setUsername($v['username']);
        $people->setPassword($v['password']);
        $people->setCabang($v['cabang']);
    }
    return $people;
}

function getOrgData($connection) {
    $posisiAcess = array();
    $sql = "select * from simposisi";
    $stmt = $connection->prepare($sql);
    $stmt->execute();
    foreach ($stmt->fetchAll() as $k => $v) {
        $posisi = new Posisi();
        $posisi->setPosisiId($v['posisi_id']);
        $posisi->setKodePosisi($v['kode_posisi']);
        $posisi->setParent($v['parent']);
        $posisi->setNamaPosisi($v['nama_posisi']);
        $posisi->setParentPath($v['parent_path']);
        $posisi->setCabangId($v['cabang_id']);
        $posisi->setActiveStatus($v['active_status']);
        $posisi->setPeopleId(getPeopleById($v['people_id'],$connection));
        $posisi->setPembinaan($v['pembinaan']);
        $posisi->setHari($v['hari']);
        $posisi->setJam($v['jam']);
        $posisi->setKitab($v['kitab']);
        $posisiAcess[] = $posisi;
    }
    return $posisiAcess;
}

$all = getOrgData($connection);

//untuk mendapatkan menu
function has_children($rows, $id) {
    foreach ($rows as $row) {
        if ($row->getParent() == $id)
            return true;
    }
    return false;
}

function build_menu($rows, $parent = 0, $vert = 0) {
    if ($vert == 1) {
        $result = "<ul type=\"vertical\">";
    } else {
        $result = "<ul>";
    }
    foreach ($rows as $row) {
        if ($row->getParent() == $parent) {
            $result .= "<li><b>{$row->getNamaPosisi()}<br></b>{$row->getPeopleId()->getName()}";
            if (has_children($rows, $row->getPosisiId()))
                $result .= build_menu($rows, $row->getPosisiId(), $row->getPembinaan());
            $result .= "</li>";
        }
    }
    $result .= "</ul>";

    return $result;
}
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Tampilan Struktur</title>
        <script src="./jquery.min.js"></script>
        <link href="./orgchart/orgchart.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="./orgchart/orgchart.js"></script>
        <script>
            $(document).ready(function () {
                // create a tree
                $("#tree-data").jOrgChart({
                    chartElement: $("#tree-view"),
                    nodeClicked: nodeClicked
                });

                // lighting a node in the selection
                function nodeClicked(node, type) {
                    node = node || $(this);
                    $('.jOrgChart .selected').removeClass('selected');
                    node.addClass('selected');
                }
            });
        </script>
    </head>
    <body>
        <div>
            <center>
                <div class="container">
                    <ul id="tree-data" style="display:none">
                        <li id="root" style="background-color: blue;">
                            <b>Struktir Organisasi</b>
                            <?php echo build_menu($all); ?>
                        </li>
                    </ul>
                    <div id="tree-view"></div>  
                </div>
            </center>
        </div>
    </body>
</html>

Jika sudah sekarang coba jalankan, jika tampilan seperti gambar paling atas, berarti sudah berhasil. Silahkan di kembangkan kembali dan sampai ketemu di tutorial selanjutnya. Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Tuesday, February 19, 2019

Trik Menggunakan Jquery UI datepicker

Tags
Assalamualakum....
Sahabat Pojok Code semua bagaimana kabarnya? semoga dalam keadaan baik-baiksaja. Seperti kita ketahui saat ini dunia IT berkembang dengan sangat pesat, hal ini ditunjang dengan semakin meluasnya jaringan internet bahkan sudah sampai ke pelosok-pelosok desa. Sebagai seorang programmer kita harus bisa menyajika tampilan-tampilan yang ramah terhadap pengguna, dan membuat pengguna nyaman berlama-lama dengan system. Dengan dasar itu saya akan sharing mengenai Trik Mengunakan Jquery UI datepicker, sudah pada taukan dan tidak asing lagi. bisa dibayangkan jika kita melakukan input tanggal secara manual. Akan sangat membosannkan dan sangat riskan salah input. Oleh karena itu tutorial ini hadir buat kamu..

Daftra ini postingn kali ini.
  1. Sekilas dan gambaran umum
  2. Kebutuhan dan mateial pendukung
  3. Default JQuery datepicker
  4. JQuery Datepicker dengan format tanggal
  5. JQuery Datepicker dengan pilihan bulan dan tahun
  6. JQuery Datepicker dengan click button
  7. Jquery Datepicker dengan custom button
Untuk gambaran unum saya kira penjelasan diatas sudah cukup. Sekarang kita akan melangkah ke bagian yang kedua yaitumateial pendukung, supaya prijek kita kali ini berjalan dengan lancar kita membutuhkan
  • Jquery bisa download dari Jquery.com
  • jquery UI bisa download langsung dari situs resminya
  • Image untuk button
Jika semua kebutuhan sudah disiapkan silahkan susun seperti terlihat pada gambar dibawah ini.


 Selanjutnya buat code pada file index.html

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="jquery-ui/css/jquery-ui.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery-ui/js/jquery-ui.min.js"></script>
    </head>
    <body>
        <div><center>Pilihan Calendr Dengan JQuery UI</center></div>
        <hr>        
    </body>
</html>

Sekarang kita tambahkan sebuat tabel dengan 2 column untuk merapikan input datepicker yang akan kita buat. Tambahkan code dibawah ini untuk bagian body.

<table width="50%" cellpadding="3" cellspacing="0">
 <tr>
  <td>Calendr Default</td>
  <td>
   <input type="text" name="txtCalender1" id="txtCalender1" class="txtCalender1"/>
  </td>
 </tr>
</table>
<script>
 $(function (){
  $('.txtCalender1').datepicker();
 });
</script>

jika hasil yang ditampilkan seperti dibawah ini, berarti kamu sudah berhasil
 Selanjutnya kita akan membuat datepicker dengan format tanggal,pilihan bulan dan tahun,tombol tambaha, dan custom tombol tambahan.
Buatlah code seperti dibawah ini.

<table width="50%" cellpadding="3" cellspacing="0">
 <tr>
  <td>Calendr Default</td>
  <td>
   <input type="text" name="txtCalender1" id="txtCalender1" class="txtCalender1"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Format Date</td>
  <td>
   <input type="text" name="txtCalender2" id="txtCalender2" class="txtCalender2"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Pilihan Bulan dan Tahun</td>
  <td>
   <input type="text" name="txtCalender3" id="txtCalender3" class="txtCalender3"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Button Default</td>
  <td>
   <input type="text" name="txtCalender4" id="txtCalender4" class="txtCalender4"/>
  </td>
 </tr>
 <tr>
  <td>Calendr Dengan Button custom</td>
  <td>
   <input type="text" name="txtCalender5" id="txtCalender5" class="txtCalender5"/>
  </td>
 </tr>
 <script>
  $(function (){
   $('.txtCalender1').datepicker();
  });
  
  $(function (){
   $('.txtCalender2').datepicker({
    dateFormat : 'dd MM yy'
   });
  });
  
  $(function (){
   $('.txtCalender3').datepicker({
    dateFormat : 'dd MM yy',
    changeMonth: true,
    changeYear: true
   });
  });
  $(function (){
   $('.txtCalender4').datepicker({
    dateFormat : 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    showOn: "button"
   });
  });
  
  $(function (){
   $('.txtCalender5').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "./calendar.png",
    buttonImageOnly: true,
    buttonText: "Select date"
   });
  });
 </script>
</table>

Sekarang coba jalankan, jika hasilnya seperti dibawah ini kamu sudah berhasil.
Selamat mencoba, semoga membatu. Sampai ketemu di tutorial selanjutnya


Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, February 15, 2019

Menu Horizontal dari DB Menggunakan jQuery & PHP

Tags

Assalamualakum....
Bagaimana kabarnya sahabat pojok code eh sahabat blogger semua, mudah-mudahan dalam keadaan sehat walafiat selalu. Sahabat kali ini saya mau share ke kalian cara untuk membut menu horizontal yang dinamis load langsung dari database, sebelumnya saya sudah posting mengeni yang menu vertikalnya dan bisa dilihat di sini Tree menu dinamis load dari DB.

Menu horizontal seperti ini sering sekali kita temukan di website-website atau blog, sebagi programmer sudah selayaknya kamu mengetahui cara-cara ini.

Dafar ini postingn ini:
  1. Gambaran umum
  2. Bahan dan material pendukung
  3. Coding dan programming
  4. Testing dan preview
  5. File Code latihan
Untuk gambaran umum saya rasa penjelasan diatas sudah cukup, sekarang kita akan mengumpulkan apa saja material pendukung untuk projek kita kali ini.
  1. Jquery, untuk jquery kamu bisa download dari situs resminya yaitu jquery.com
  2. Notepad ++ untuk text editornya, tapi jika kamu mengunakan yang lainnya juga bisa seperti sublime text visual studio netbeans dan lain sebagainya.
  3. Lib Jquery Sample menu download dari link berikut https://github.com/mshahbazsaleem/jQSimpleMenu
Setelah semua material pendukung terkumpul, sekarang kita buat database baru, buat tabel baru dan insert datanya, codenya bisa dilihat dibawah ini.
CREATE TABLE `menu` (
    `id_menu` INT(11) NOT NULL AUTO_INCREMENT,
    `parent_id` INT(11) NOT NULL DEFAULT '0',
    `title` VARCHAR(200) NOT NULL DEFAULT '0',
    `url` VARCHAR(200) NULL DEFAULT NULL,
    `menu_order` INT(11) NOT NULL DEFAULT '0',
    PRIMARY KEY (`id_menu`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=5
;
setelah tabel baru terbentuk sekarang kita input datanya:
INSERT INTO `menu` (`id_menu`, `parent_id`, `title`, `url`, `menu_order`) VALUES
    (1, 0, 'Beranda\r\n', 'null', 1),
    (2, 0, 'profile', NULL, 2),
    (3, 2, 'Visi', NULL, 3),
    (4, 2, 'Missi', NULL, 0),
    (5, 0, 'Blog', NULL, 4),
    (6, 5, 'Programming', NULL, 5),
    (7, 5, 'Vlog', NULL, 6),
    (8, 6, 'java', NULL, 0),
    (9, 6, 'C++', NULL, 0),
    (10, 0, 'About', NULL, 0);
Setelah databse terbentuk sekarang kita gunakan lib yang sudah kita download tadi, susun direktori seperti terlihat pada gambar dibawah.
Folder CSS, Image dan JS kita gunakan dari lib yang sudah kita download tadi. nah yang kita buat baru adalah bagian DBConnetion.php dan index.php.
Dibawah ini adalah code untuk DBConnection.php

Baca Juga :

class DBConnection { //put your code here private $host = "localhost"; private $dbName = "latihan3"; private $usr = "root"; private $pwd = "root"; public function getConnection() { try { $conn = new PDO("mysql:host=$this->host;dbname=$this->dbName", $this->usr, $this->pwd); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { echo "Connection failed: " . $e->getMessage(); } return $conn; } }
ini code untuk index.php

<?php require_once 'lib/DbConnection.php'; $con = new DBConnection(); $connection = $con->getConnection(); function has_children($rows,$id) { foreach ($rows as $row) { if ($row['parent_id'] == $id) return true; } return false; } function build_menu($rows,$parent=0) { if($parent==0){ $result = '<ul class="menu">'; }else{ $result = '<ul>'; } foreach ($rows as $row) { if ($row['parent_id'] == $parent){ $result.= "<li><a href=\"https://www.pojokcode.com\">{$row['title']}</a>"; if (has_children($rows,$row['id'])) $result.= build_menu($rows,$row['id']); $result.= "</li>"; } } $result.= "</ul>"; return $result; } $sql = "select * from menu"; $stmt = $connection->prepare($sql); $stmt->execute(); $menu = array(); foreach ($stmt->fetchAll() as $k=> $v) { $menu[]=array('id'=>$v['id_menu'],'title'=>$v['title'],'parent_id'=>$v['parent_id']); } ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>menu horizontal</title> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jqsimplemenu.js"></script> <link rel="stylesheet" href="css/jqsimplemenu.css" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function () { $('.menu').jqsimplemenu(); }); </script> </head> <body> <?php echo build_menu($menu); ?> </body> </html>

Jika sudah selesa, sekarang coba jalankan file index.php nya jika menghasilkan seperti tampilan diatas berarti kamu sudah berhasil. Silahkan di modifikasi dan di kembangkan sendiri. Mudah mudahan bermanfaat. Terus belajar dan jika ada pertanyaan silahkan cantumkan pada kolom komentar dibawah. Terima Kasih
Salam

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Thursday, February 14, 2019

Free System Informasi Restoran dengan PHP & MySql

Tags
Assalamualakum....
Sahabat pojok code semua bagaimana kabarnya, mudah-mudahan dalam keadaan baik-baik saja. Seperti kita ketahui indonesia merupakan syurganya wisata kuliner, sudah sangat terkenal kemanca negara. Hal ini terbukti dengan menjamurnya restoran-restoran dan rumah makan, hampir disetiap sudut kita bisa melihat resoran atau tempat makan. Dengan alasan itu tentu saja akan berbanding lurus dengan kebutuhan system yang dapat menujang perkembangan sebuah restoran. Kali ini saya mau share ke kalian system informasi restoran berbasis PHP dan MySql atau bisa juga mengunakan MariaDB, karena MySql sekarang sudah tidak open source lagi. Aplikasi ini gratis bisa kalian download tentunya dengan syarat sangat murah hanya subscrebe canel youtube aja, saya rasa ini hal kecil yang tidak sebanding dengan pengalaman ilmu yang akan kalian dapat.

Daftar ini postingan kali ini:
  1. gambaran umum
  2. kebutuhan material
  3. Process Instalasi Database
  4. Process Instalasi code aplikasi
  5. Testing dan preview
  6. Download File aplikasi
Untuk gambaran secara umum kayanya sudah cukup jelas dari gambaran ditas, sekarang kita akan bahas apa saja yang dibutuhkan untuk menjalankan aplikasi ini. Untuk menjalankan aplikasi (system) ini kita membutuhkan
  • PHP versi 5.4 kebawah, jika kamu mengunakan yang diatasnya akan ada error conneksi, karena metide koneksinya hanya support versi 5.4 kebawah. Tapi kalau kamu mau sedikit edit tidak maslalah.
  • Untuk database bisa menukana MySql atau MariaDB, versi yang digunakan untuk ini bebas.
Sekarang kita masuk process istalasi, saya sarankan kamu menggunakan aplikasi xampp, wamp atau palikasi semisalnya, karena dengan pakai ini jadi lebih mudah.
Setelah kamu download file code latihan selanjutnya exstrak dan simpan pada filder htdoc untuk xampp folder www untuk wamp.
baca juga :
Selanjutnya lakukan restore database dari file yang sudah di download tadi, untuk hal ini saya asumsikan kamu sudah bisa melakukan backup dan restore database, jika ada yang belum bisa bisa lihat postingan yang ini restore database. dan rancangan databasenya kurang lebih seperti gambar dibawah ini, database memang masih mengunakan myisam (jadi tidak ada relasi databse)

Jika sudah berhasil resotre tidak bisa langsung jalankan, tapi harus setting conneksinya dulu. Cari file inc.connection.php pada folder library.
Setelah itu buka file tadi dengan mengunakan notepad ++ atau editor sejenisnya. Lakukan penyesuaian dengan setting koneksi database yang kalian sudah setting.


Jika setting sudah selesai save hasil edit dan coba jalankan melalui browser.
http://localhost:8080/resto2/
 nah untuk port sesuaikan dengan port agan jika default hilangkan saja. Jika berhasil maka akan muncul menu untuk login.

Silahkan coba login dengan dua account
  • Admin
user : admin
pass : admin
level: admin
  • kasir
user : kasir
pass : kasir
level : kasir

ini adalah tampilan admin

dan ini adalah tampilan untuk kasir.


tampilan transaksi pembelian.
Tampilan transaksi penjualan
Untuk lebih jelasnya silahkan download file latihan dari link di bawah ini :

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Tuesday, February 12, 2019

Collapsible Sidebar Mengunakan Bootstrap

Tags


Assalamualakum....
Sahabat pojok code semua, bagaimana kabarnya? mudah-mudahan dalam keadaan baik baik saja. Saat ini ketika kita mengunjungi sebuah halaman wesite sudah tidak jamanya lagi static (hanya bisa tampil versi desktop) pas kita buka dengan mobile harusnya langsung menyesuaikan istilah kerenya responsive. Oleh sebab itu dipostingan kali ini saya mau share sebuah desain tampilan Home yang bisa menyesuaikan denan ukuran layar dan juga side menu yang bisa di buka tutup sesuka pengguna.
 Daftar ini postingan:
  1. Gambaran umum
  2. Material yang dibutuhkan
  3. Process Coding
  4. Testing dan preview
  5. File Code Latihan
Gambaran umum sudah dijelaskan pada bagian paling atas, sekarang kita akan bahas apa saja yang dibutuhkan untuk membuat halaman seperti ini.

Material yang dibutuhkan

 Untuk menunjang process pembuatan halaman seperti gambar diatas, kita membutuhkan
  1. Jquery, untuk ini bisa download dari situs reminya jquery.com
  2. bootstrap 4.1.0 ini juga bisa download dari situs resminya
  3. Fontawesome ini juga bisa download versi freenya
  4. popper ini juga bisa didownlod, 
semua kebutuhan material bisa anda download langsung dari file latihan dibawah, atau bisa juga download sendiri dari situs resminya.

Process Codeing dan Programming 

Buatlah dua buah file index.html dan style.css
buat code pada file index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <title>Collapsible sidebar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script defer src="use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  <script defer src="use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
 </head>
 <body>
  <div class="wrapper">
   <nav id="sidebar">
    untuk menu sidebar
   </nav>
   <div id="content" >
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
     untuk menu top
    </nav>
    <div class="container-content" >
     untuk content
    </div>
    <footer>
      untuk footer
    </footer>
   </div>
  </div>
  <script src="code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>  
 </body>
</html>

karena process penulisan code jadi error postingan :D lihat langsung aja dari file latihan ya

Lihat juga :
tapi ini code untuk file CSS


/*
    DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    perspective: 1500px;
}


#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*background: #7386D5;
    color: #fff;*/
 background:#eeeeee;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
}

#sidebar.active {
    margin-left: -250px;
    transform: rotateY(100deg);
}

#sidebar .sidebar-header {
    /*padding: 20px;*/
 height:70px;
 text-align:center;
 padding: 18px;
 background:#f8f9fa;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    /*color: #7386D5;
    background: #fff;*/
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    /*color: #fff;
    background: #6d7fcc;*/
}


a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    /*color: #7386D5;*/
}

a.article, a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
}

.navbar-light{
 background: #6d7fcc;
}

.container-content{
 padding:10px;
 min-height: 100vh;
}

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    cursor: pointer;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}


#sidebarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }

}

/*---------------------------------------
 footer
----------------------------------------*/
footer{
 background-color:#efefef;
}
 


Selanjutnya kita coba jalankan dan preview. Jika halinya seperti gambar diatas berarti sudah berhasil.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Friday, February 8, 2019

Upload Image Dengan Preview Pada HTML

Tags
Assalamualakum wr. wb.....
Sahabat blogger semua, bagaimana kabarnya? tentu saja mudah-mudahan dalam keadaan baik-baik saja. Kali ini saya mau share cara upload gambar pada html tapi ada previewnya. Jadi sebelum image kita submit kita akan mengetahui image mana yang sudah kita upload.
Daftar isi :
  1. Deskripsi umum (sudah kita jelaskan diatas)
  2. Material yang dibutuhkan
  3. Coding dan Programming
  4. Testing dan View Hasil
  5. Berkas Latihan
Sekarang kita akan mulai mengumpulkan material yang dibutuhkan untuk memulai latihan ini.
  1. Siapkan library JQuery, kamu bisa download dari jquery.com atau klik link dibawah ini JQUERY
  2. Siapkan Text Editor atau IDE (integrated development environment) kamu bisa mengunakna Notepad ++, sublime text, visual studo code atau Netbeans
  3. Siapkan File image yang akan digunakan untuk testing nantinya
Ok, jika semua material sudah disiapkan sekarang kita akan memulai pembuatan coding. Disini saya mengunakan Netbeans untuk process pembuatan.
Klik file new projek, projek yang dibuat boleh PHP atau HTML.
Selanjutnya buatlah susuan folder seperti terlihat pada gambar dibawah:
Simpan image untuk value image ketika belum di lakukan upload pada folder img.
simpan file jquery,min.js pada folder lib
Selanjutnya buatlah code pada file indexnya.

Lihat Juga :

Pertama kita panggil jquery dari filder lib kedalam projek kita.


<script src="../lib/jquery.min.js" type="text/javascript"></script>

Selanjutnya buat code pada bagian body

<table width="80%">
 <tr>
  <td width="10%" align="right">Image :</td>
  <td width="80%">
   <input type="file" name="txtFoto" id="txtFoto" onchange="readURL(this);"/>
  </td>
 </tr>
 <tr>
  <td></td>
  <td>
   <div align="left"><img id="blah" class="img-style" src="../img/no-image.png" />
   </div>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Nama :</td>
  <td width="80%">
   <input type="text" name="txtNana" id="txtNama" size="50"/>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Alamat :</td>
  <td width="80%">
   <textarea></textarea>
  </td>
 </tr>
</table>

Kemudian buatlah file CSS pada bagian head untuk menyesuaikan tampilan preview nantinya
 
<style>
 .img-style{
  background-color: #eee;
  border: 1px solid #ccc;
  width: 150px;
  height: 150px;
  border-radius: 3px;
  box-shadow: 0 0 0 #999;
 }
</style>

Selanjutnya kita akan buat code Javascript dibagian bawah code tampilan

<script>
 function readURL(input) {
  if (input.files && input.files[0]) {
   if (input.files[0].size / 1024 >= 30000) {
    alert("Ukuran maximal gambar 3 MB");
    document.getElementById("txtFoto").value = null;
   } else {
    var reader = new FileReader();
    reader.onload = function (e) {
     $('#blah').attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
   }
  }
 }
</script>

Nah jika sudah selesai kita akan coba jalankan, klik kana pada file index nya dan run. hasilnya akan muncul dan cobalah upload image, jika image umcul pada tampilan preview maka sudah berhasil
ini adalah tampilan ketika pertama kali dijalankan.
Dan ini tampilan ketika sudah melakukan upload image
Ok segitu aja, selamat mencoba. Untuk file latihannya silahkan download dari link dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :