Untuk mencontohkan membuat "Title Page" dari Database MySQL dengan CodeCharge Studio ini, kita memerlukan halaman khusus yang menampilkan hanya satu entri saja. Sebelumnya kita telah membuat tabel daftar kisah di homepage, (lihat Menggunakan Grid Builder untuk Tabel di Homepage). Di tabel tersebut kita telah memiliki Judul Kisah berbentuk Text Link yang mengarahkan ke halaman kisah detil, yakni halaman yang memuat detil kisah.
Cara mudah membuat website dinamis dengan CodeCharge Studio (Dengan Contoh Kasus)
Home » Archives for December 2012
Menggunakan Grid Builder untuk Tabel di Homepage
Saat ini ccs project kita sudah memiliki halaman-halaman seperti terlihat pada gambar.
Halaman pendukung lainnya, seperti common.php, class dan lain-lain akan tercipta otomatis oleh software CodeCharge Studio. Kita tidak perlu bersusah payah membuatnya.
Hanya nanti jika kita akan mengupload pada server hosting, file common.php perlu sedikit diedit untuk penyesuaian nama database, user dan passwordnya.
Kembali ke proyek web contoh kita.
Halaman homepage/index baru memiliki form login saja. Jadi kita akan menempatkan daftar kisah terbaru di bawah form login dan sebuah kisah teranyar disampingnya.
atur relasi tabel-tabel tersebut seperti gambar di bawah ini
sortby idkisah Desc
Where tampil = 1 (Ini akan memfilter data yang muncul hanya yang sudah di oke kan oleh penulisnya).
Type Expression
Halaman pendukung lainnya, seperti common.php, class dan lain-lain akan tercipta otomatis oleh software CodeCharge Studio. Kita tidak perlu bersusah payah membuatnya.
Hanya nanti jika kita akan mengupload pada server hosting, file common.php perlu sedikit diedit untuk penyesuaian nama database, user dan passwordnya.
Kembali ke proyek web contoh kita.
Halaman homepage/index baru memiliki form login saja. Jadi kita akan menempatkan daftar kisah terbaru di bawah form login dan sebuah kisah teranyar disampingnya.
Membuat Tabel Kisah di halaman depan
Seperti biasa kita akan menggunakan Grid Builder. Pada build query, tambahkan tabel kisah, tabel profil dan tabel profil as penulis.atur relasi tabel-tabel tersebut seperti gambar di bawah ini
sortby idkisah Desc
Where tampil = 1 (Ini akan memfilter data yang muncul hanya yang sudah di oke kan oleh penulisnya).
Type Expression
Label:
Grid Builder,
Query Builder,
Tabel Grid
HTML Text Area dengan TinyMCE
Sebelum mulai, lihat gambar ini
Saat membuat form menggunakan codecharge studio, default isi dari textarea hanya teks. Kita tidak dapat mengisikan kode html.
Contoh berikut ini kita akan membuat textarea dalam form menjadi isian html. Pastinya akan lebih baik.
Codecharge studio versi 4 yang saya gunakan memiliki tool untuk membuat form seperti ini. Hanya saja editor yang digunakan adalah FCKeditor. CCS akan otomatis menambahkan script di halaman yang kita akan pasang textarea. Tetapi, kita tetap harus mendownload fckeditor dari webnya dan mengupload sendiri.
Saat membuat form menggunakan codecharge studio, default isi dari textarea hanya teks. Kita tidak dapat mengisikan kode html.
Contoh berikut ini kita akan membuat textarea dalam form menjadi isian html. Pastinya akan lebih baik.
Codecharge studio versi 4 yang saya gunakan memiliki tool untuk membuat form seperti ini. Hanya saja editor yang digunakan adalah FCKeditor. CCS akan otomatis menambahkan script di halaman yang kita akan pasang textarea. Tetapi, kita tetap harus mendownload fckeditor dari webnya dan mengupload sendiri.
Label:
Membuat Form,
Text Area,
tinyMCE
Cara Sederhana Mengganti Teks Dengan Gambar
Untuk contoh mengganti teks dengan gambar, kita masih menggunakan tabel yang telah dibuat, yakni tabel "Kisah". Dalam tabel ini, kolom Tampil menampilkan angka 1 untuk Kisah yang ditayangkan dan angka 0 untuk kisah yang belum ditayangkan. Kita menginginkan angka 1 dan 0 di ganti dengan :
Label:
Membuat tabel data,
text to image
Membuat Link untuk Edit.
Masih menggunakan table "addkisah" yang telah dibuat, kita akan mengganti text judul yang sekarang berupa Label Text menjadi Link.
Link ini akan mengarahkan data ke Form Edit disebelahnya. Dengan demikian member dapat mengupdate tulisannya, dapat mengaktifkan/ menon aktif dan bahkan dapat menghapus.
Lihat Gambar ini.
Link ini akan mengarahkan data ke Form Edit disebelahnya. Dengan demikian member dapat mengupdate tulisannya, dapat mengaktifkan/ menon aktif dan bahkan dapat menghapus.
Lihat Gambar ini.
Label:
Link edit,
Membuat Form
Membuat Daftar Tulisan yang Dimuat Oleh Member Login Saja
Agak ribet juga ngasih judulnya. Maksud saya adalah membuat tabel yang berisi daftar tulisan yang hanya dibuat oleh member yang sedang login. Kegunaannya adalah agar member yang login dapat melihat, memperbaiki ataupun menghapus tulisan-tulisan yang pernah dibuatnya.
Sebenarnya cara ini juga berlaku di hampir semua web yang menerapkan sistem keanggotaan. Bayangkan jika kita sebagai member facebook tidak dapat melihat post apa saja yang pernah kita buat... cilaka deh.
Sebenarnya cara ini juga berlaku di hampir semua web yang menerapkan sistem keanggotaan. Bayangkan jika kita sebagai member facebook tidak dapat melihat post apa saja yang pernah kita buat... cilaka deh.
Label:
Grid Builder,
Tabel Grid
Menggabung Dua Field Dalam Listbox
Tulisan ini adalah sambungan dari artikel sebelum ini yang membahas membuat form untuk memuat kisah teman. Penekanan khusus harus dilakukan untuk mengatur Listbox idteman (teman yang diceritakan).
Gambar di samping memperlihatkan form yang telah kita siapkan sebelumnya.
Kita akan membuat daftar isian listbox tersebut dengan gabungan data idteman dan nama.
seperti (ID:no) Nama
Gambar di samping memperlihatkan form yang telah kita siapkan sebelumnya.
Kita akan membuat daftar isian listbox tersebut dengan gabungan data idteman dan nama.
seperti (ID:no) Nama
Form Untuk Memuat TextArea
Masih ingat konsep website yang akan kita buat dalam web contoh?, lihat Konsep Website Contoh agar form yang akan kita buat ini sesuai dengan konsep awal.
Teman yang sudah register (member) dapat login dan menceritakan kisahnya, atau kisah temannya yang juga sudah register juga.Sebelumnya kita sudah menyiapkan tabel "kisah" dalam database kita.
Mengatur ListBox
Listbox sering sekali dipakai dalam form. Digunakan untuk memberi isian yang sudah ditetapkan. Misalnya Jenis kelamin yang isinya Laki-laki atau Perempuan, Isian nama negara, kota, agama dll.
Menggunakan Codecharge Studio, kita dapat mengisi Listbox dengan daftar yang telah ada dalam tabel database.
Menggunakan Codecharge Studio, kita dapat mengisi Listbox dengan daftar yang telah ada dalam tabel database.
Label:
Setting Listbox ccs
Membuat Daftar Member dan Form Editnya Untuk Admin
Sekarang kita akan membuat Halaman khusus untuk administrator yang menampilkan daftar semua member. Halaman ini dilengkapi juga dengan form untuk edit data dan untuk menghapus keanggotaan.
Buat satu halaman khusus untuk admin, beri nama "memberadmin"'.
Untuk Grid (tabel data member) kita menggabungkan tabel profil dan tabel tingkatmember, sedangkan untuk form edit kita menggunakan tabel profil.
Buat satu halaman khusus untuk admin, beri nama "memberadmin"'.
Untuk Grid (tabel data member) kita menggabungkan tabel profil dan tabel tingkatmember, sedangkan untuk form edit kita menggunakan tabel profil.
Flash Menu di CCS
Banyak sekali bentuk-bentuk menu yang dapat dibuat untuk website kita. Dari menu text yang sederhana sampai ke image dan flash menu. Codecharge studio menyediakan fasilitas untuk membuat menu melalui toolbox nya.
Menu ini dapat diambil dari database ataupun menu statis. Untuk web yang memiliki sangat banyak menu, sebaiknya menggunakan database, akan tetapi jika hanya memiliki beberapa menu saja, sangat praktis menggunakan menu statis.
Menu ini dapat diambil dari database ataupun menu statis. Untuk web yang memiliki sangat banyak menu, sebaiknya menggunakan database, akan tetapi jika hanya memiliki beberapa menu saja, sangat praktis menggunakan menu statis.
Label:
Membuat Menu Flash
Membuat Link Logout
Dimana ada Login di situ ada Logout.
Membuat Halaman Logout.
Dengan CodeCharge Studio, membuat sistem logout sangatlah mudah. Berikut tahapannya.
Label:
Belajar code charge studio,
Logout
Menampilkan Database dalam tabel
Tentunya kita akan menampilkan data dalam website bukan? Nah dalam web contoh ini kita akan buat beberapa tabel yang dihasilkan dari database. Pertama kita akan menambahkan tabel profil user dalam halaman update profil yang telah kita buat. Asumsinya member ingin lihat datanya yang sudah di update.
Halaman yang kita gunakan adalah halaman updateprofil. Silahkan dibuka menggunakan CodeCharge Studio.
Insert satu kolom disamping form updateprofil. Caranya,
Halaman yang kita gunakan adalah halaman updateprofil. Silahkan dibuka menggunakan CodeCharge Studio.
Insert satu kolom disamping form updateprofil. Caranya,
"Generated with CodeCharge Studio"
Sepengalaman saya menggunakan codecharge studio versi trial, problem yang agak mengganggu adalah munculnya tulisan "Generated with CodeCharge Studio" di footer setiap halaman yang di publish. Kan jadi malu kelihatan banget memakai trial software. hehehe.
Usut punya usut, tulisan tersebut tidak dapat diganggu gugat melalui codecharge studio. tetapi dapat kita hapus dari halaman php hasil publishnya.
Berikut cara menghapusnya:
Terdapat beberapa model kode yang dihasilkan oleh software CCS untuk menuliskan "Generated with CodeCharge Studio". Kalau dilihat sepintas saja tidak akan kentara. contohnya seperti ini:
Kode tersebut terdapat pada bagian akhir setiap file .php yang di publish. Hapus tulisan yang berwarna kuning.
CCS menuliskan kode tersebut dalam berbagai macam cara, jadi tidak selalu persis seperti di atas.
Contoh lain adalah:
Kuncinya adalah, hapus tulisan antara <center></center> (dalam berbagai versi tentunya).
Kelemahannya, setiap kali kita mempublish file dari CCS, maka kode tersebut ada lagi. Jadi hapuslah kalau sudah fix betul (mau di upload ke server hosting).
Usut punya usut, tulisan tersebut tidak dapat diganggu gugat melalui codecharge studio. tetapi dapat kita hapus dari halaman php hasil publishnya.
Berikut cara menghapusnya:
Terdapat beberapa model kode yang dihasilkan oleh software CCS untuk menuliskan "Generated with CodeCharge Studio". Kalau dilihat sepintas saja tidak akan kentara. contohnya seperti ini:
//Show Page @1-8AFA269F
$Login->Show();
$Tpl->block_path = "";
$Tpl->Parse($BlockToParse, false);
if (!isset($main_block)) $main_block = $Tpl->GetVar($BlockToParse);
if(preg_match("/<\/body>/i", $main_block)) {
$main_block = preg_replace("/<\/body>/i", strrev(">retnec/<>tnof/<>llams/<.;111#&;501#&;001#&;711#&;611#&;38#&>-- CCS --!< e;301#&;411#&;79#&;401#&CedoC>-- CCS --!< htiw>-- SCC --!< ;001#&;101#&ta;411#&;101#&;011#&e;17#&>llams<>\"lairA\"=ecaf tnof<>retnec<") . "</body>", $main_block);
} else if(preg_match("/<\/html>/i", $main_block) && !preg_match("/<\/frameset>/i", $main_block)) {
$main_block = preg_replace("/<\/html>/i", strrev(">retnec/<>tnof/<>llams/<.;111#&;501#&;001#&;711#&;611#&;38#&>-- CCS --!< e;301#&;411#&;79#&;401#&CedoC>-- CCS --!< htiw>-- SCC --!< ;001#&;101#&ta;411#&;101#&;011#&e;17#&>llams<>\"lairA\"=ecaf tnof<>retnec<") . "</html>", $main_block);
} else if(!preg_match("/<\/frameset>/i", $main_block)) {
$main_block .= strrev(">retnec/<>tnof/<>llams/<.;111#&;501#&;001#&;711#&;611#&;38#&>-- CCS --!< e;301#&;411#&;79#&;401#&CedoC>-- CCS --!< htiw>-- SCC --!< ;001#&;101#&ta;411#&;101#&;011#&e;17#&>llams<>\"lairA\"=ecaf tnof<>retnec<");
}
$CCSEventResult = CCGetEvent($CCSEvents, "BeforeOutput", $MainPage);
if ($CCSEventResult) echo $main_block;
//End Show Page
CCS menuliskan kode tersebut dalam berbagai macam cara, jadi tidak selalu persis seperti di atas.
Contoh lain adalah:
$Tpl->block_path = "";
$Tpl->Parse($BlockToParse, false);
if (!isset($main_block)) $main_block = $Tpl->GetVar($BlockToParse);
$DKCGJHAP1M1C8R6E8A = explode("|", "<center><font face=\"A|rial\"><small>Ge&|#110;era|ted <!|-- SCC -->w&#|105;th <!-- |SCC -->Co|;deCh&|#97;rge |<!-- CCS -->S|6;udio.</sm|all></font></center>");
if(preg_match("/<\/body>/i", $main_block)) {
$main_block = preg_replace("/<\/body>/i", join($DKCGJHAP1M1C8R6E8A,"") . "</body>", $main_block);
} else if(preg_match("/<\/html>/i", $main_block) && !preg_match("/<\/frameset>/i", $main_block)) {
$main_block = preg_replace("/<\/html>/i", join($DKCGJHAP1M1C8R6E8A,"") . "</html>", $main_block);
} else if(!preg_match("/<\/frameset>/i", $main_block)) {
$main_block .= join($DKCGJHAP1M1C8R6E8A,"");
}
$CCSEventResult = CCGetEvent($CCSEvents, "BeforeOutput", $MainPage);
if ($CCSEventResult) echo $main_block;
//End Show Page
Kuncinya adalah, hapus tulisan antara <center></center> (dalam berbagai versi tentunya).
Kelemahannya, setiap kali kita mempublish file dari CCS, maka kode tersebut ada lagi. Jadi hapuslah kalau sudah fix betul (mau di upload ke server hosting).
Membuat Form Upload
Saat ini kita sudah punya form update profil. Buka kembali halaman updateprofil menggunakan CodeCharge Studio. (localhostnya harus sudah nyala juga).
Perhatikan bahwa field Photo masih berupa Text Box. DELETE field photo dan insert dengan File Upload (ada di tool box - forms) lihat gambar:
Perhatikan bahwa field Photo masih berupa Text Box. DELETE field photo dan insert dengan File Upload (ada di tool box - forms) lihat gambar:
Label:
Membuat Form Upload
Halaman Form Update Profil
Di halaman update profil ini, member dapat menambahkan data alamat, telepon dan upload photonya. Tentu saja setiap member hanya dapat mengupdate datanya sendiri.
Label:
Form update profil,
form upload photo
Membuat Include Page Header
Header akan kita isi dengan banner, logo dan moto, menu juga kalo mau.
Caranya mudah saja. Buatlah satu file baru dengan nama header (boleh nama lain). Pilih jenis Include page... lihat gambar.
CodeCharge Security Setting
Security Setting
Klik icon Settings (sudah dibahas di posting terdahulu)- Pilih security.
- Pilih Table
- Login Page adalah halaman letak form login kita (index)
- User Table adalah tabel database yang digunakan untuk data login, pilih tabel profil
- UserID Field adalah data yang digunakan sebagai id member, pilih idteman
- Login Field adalah data yang kita gunakan sebagai username, pilih email
- Password adalah data yang digunakan sebagai password, pilih password
- Level Field adalah data yang digunakan sebagai pengenal tingkatan member, pilih tingkatmember_id
- OK.
Label:
Membuat Form Login,
Security setting
Bagaimana Membuat Form Login Dengan CCS
Ada dua bagian yang harus dilakukan agar form login dapat berfungsi baik:
- Form login
- Security setting
Membuat email konfirmasi dengan CodeCharge Studio
Sebelum memulai membuat email konfirmasi di form registrasi, pastikan kita sudah punya alamat email..
OK. Buka halaman registrasi.
Klik form "profil". Klik tab Events pada properties.
Sort ke bawah sampai ketemu "After Insert", klik kanan pilih "Add Code..." maka secara otomatis lembar kerja kita masuk ke mode Code.
OK. Buka halaman registrasi.
Klik form "profil". Klik tab Events pada properties.
Sort ke bawah sampai ketemu "After Insert", klik kanan pilih "Add Code..." maka secara otomatis lembar kerja kita masuk ke mode Code.
Membuat Halaman Registrasi
Sekarang kita akan membuat halaman registrasi menggunakan codecharge studio. Sebelum ini, kita sudah membuat layout website pada halaman index. Agar halaman registrasi kita memiliki layout yang sama dengan halaman index, cara cepatnya adalah mengcopy file index.
Caranya mudah, klik/pilih halaman index kemudian klik kanan dan pilih menu "copy to".. tulis nama file baru, dalam hal ini adalah register.
Sebelum lanjut, perlu kita pikirkan apakah keanggotaan di website kita ini memiliki tingkatan? misalnya ada administrator, ada member dll. Jika ya kita perlu membuat database tingkatan member ini. silahkan buat dulu menggunakan phpmyadmin.
gampangnya, gunakan dump file berikut di sql form
Nah.. kembali ke CCS.
Letakkan kursor di lokasi kita ingin menempatkan form registrasi. Kemudian dengan menggunakan toolbox (kolom kanan atas ccs) pada tab "Builders" pilih "Record Builder".
Pilih Connection1 (cuman ada 1 khan), klik Next...
Data Source pilih profil (tabel yang akan diisi)
Primary key pilih idteman
Tentukan record/field apa saja yang akan di input:
pilih nama, email, password, tanggallahir, tingkatmember_id
(data alamat, telp dan photo nanti saja dulu di form update. field idteman tidak perlu karena sudah autoincrement)
Klik Next...
Lihat gambar.
Berikutnya Step 3 dari 4 adalah menentukan Action.. Pilih Insert dan Cancel saja (karena ini halaman pendaftaran yang tidak digunakan untuk update dan delete data).
Klik Next
Terakhir step 4/4. Tentukan style.. ada banyak sekali pilihan style yang telah disediakan.
Untuk contoh ini saya pilih "Original)
Tentukan apakah style ini akan di gunakan di halaman atau hanya untuk form ini saja. Saya pilih style original ini hanya untuk form saja.
Lihat gbr.
Sekarang tabel form registrasi sudah tercipta. Tetapi form ini masih belum dapat digunakan. Kita masih harus mengatur beberapa hal:
Save halaman ini. Lihat Life Pagenya.
Sampai disini form regisrasi sudah berfungsi. Silahkan dicoba..
Pengaturan lainnya masih diperlukan untuk menyempurnakan form registrasi ini, misalnya:
Untuk membuat agar form ini dapat mengirimkan email ke member dan ke admin setelah sukses registrasi di bahas di tulisan berikut "Membuat email konfirmasi dengan CodeCharge Studio".
Caranya mudah, klik/pilih halaman index kemudian klik kanan dan pilih menu "copy to".. tulis nama file baru, dalam hal ini adalah register.
Sebelum lanjut, perlu kita pikirkan apakah keanggotaan di website kita ini memiliki tingkatan? misalnya ada administrator, ada member dll. Jika ya kita perlu membuat database tingkatan member ini. silahkan buat dulu menggunakan phpmyadmin.
gampangnya, gunakan dump file berikut di sql form
CREATE TABLE IF NOT EXISTS `tingkatmember` (Berikutnya jangan lupa untuk menambahkan field "tingkatmember_id" di tabel profil.
`tingkatmember_id` int(11) NOT NULL AUTO_INCREMENT,
`tingkatmember` varchar(256) NOT NULL,
PRIMARY KEY (`tingkatmember_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `tingkatmember`
--
INSERT INTO `tingkatmember` (`tingkatmember_id`, `tingkatmember`) VALUES
(1, 'member'),
(2, 'admin');
Nah.. kembali ke CCS.
Letakkan kursor di lokasi kita ingin menempatkan form registrasi. Kemudian dengan menggunakan toolbox (kolom kanan atas ccs) pada tab "Builders" pilih "Record Builder".
Pilih Connection1 (cuman ada 1 khan), klik Next...
Data Source pilih profil (tabel yang akan diisi)
Primary key pilih idteman
Tentukan record/field apa saja yang akan di input:
pilih nama, email, password, tanggallahir, tingkatmember_id
(data alamat, telp dan photo nanti saja dulu di form update. field idteman tidak perlu karena sudah autoincrement)
Klik Next...
Lihat gambar.
Berikutnya Step 3 dari 4 adalah menentukan Action.. Pilih Insert dan Cancel saja (karena ini halaman pendaftaran yang tidak digunakan untuk update dan delete data).
Klik Next
Terakhir step 4/4. Tentukan style.. ada banyak sekali pilihan style yang telah disediakan.
Untuk contoh ini saya pilih "Original)
Tentukan apakah style ini akan di gunakan di halaman atau hanya untuk form ini saja. Saya pilih style original ini hanya untuk form saja.
Lihat gbr.
Sekarang tabel form registrasi sudah tercipta. Tetapi form ini masih belum dapat digunakan. Kita masih harus mengatur beberapa hal:
- Ganti tulisan "Add/Edit Profil" Menjadi "Registrasi"
- Klik di field email, kemudian lihat properties pada tab Data. Pada properti Unique set dengan "Yes" (kita tidak mau ada member yang berkali-kali register dengan email yang sama). Pada properti Input Validation pilih Email (ini akan menjaga field email ini diisi dengan email yang benar).
- Klik field tanggallahir, lihat properties pada properti Format pilih dd/mm/yyyy (bisa juga dd-mmm-yyyy). Pada properti DBFormat pilih yyyy-mm-dd HH:nn:ss
- Klik field tingkatmember_id, atur properti Default Valuenya =1. Klik kanan pada field tingkatmember_id, pilih "Change To", pilih Hidden.
- Klik kanan pada button Add, pilih <input> properties, pada Label ganti Add menjadi "Register".
Save halaman ini. Lihat Life Pagenya.
Sampai disini form regisrasi sudah berfungsi. Silahkan dicoba..
Pengaturan lainnya masih diperlukan untuk menyempurnakan form registrasi ini, misalnya:
- Setelah tombol register di klik, ke halaman mana member baru tersebut di bawa? biasanya adalah halaman terima kasih yang ada form loginnya. Cara mengaturnya sederhana, klik buton registrasi, lihat di properties bagian Return Page, pilih halaman yang akan muncul setelah buton register di klik (kalo belum ada halamannya ya buat dulu).
- Jika tombol cancel yang di klik, ke halaman apa member akan di bawa? bisa saja di set ke halaman depan (index). Cara mengaturnya sederhana, klik buton Cancel, lihat di properties bagian Return Page, pilih halaman yang akan muncul setelah buton Cancel di klik.
- Untuk tampilan form registernya, silahkan berkreasi. Pengetahuan tentang html sangat membantu.
- Kita bisa melengkapi sisi keamanan form ini dengan Captcha yang disediakan oleh CCS (Tool box tab Form).
- Umumnya Member yang mendaftar akan menerima email pemberitahuan yang menginformasikan pendaftarannya dan info lainnya.
- Admin akan menerima email memberitahu ada yang mendaftar.
- Page title ganti menjadi Registrasi. Masuk ke mode Html.
Untuk membuat agar form ini dapat mengirimkan email ke member dan ke admin setelah sukses registrasi di bahas di tulisan berikut "Membuat email konfirmasi dengan CodeCharge Studio".
Konsep Website Contoh
Teman yang sudah register (member) dapat login dan menceritakan kisahnya, atau kisah temannya yang juga sudah register.
Member dapat menampilkan profilnya
Pengunjung dapat membaca kisah tersebut tanpa login
Member dapat menghapus kisah yang dia tulis saja
Member dapat menambahkan photonya
Ya.. gitu aja dulu konsepnya... mungkin kawan akan dapat mengusulkan pengembangan fitur berikutnya.
Dengan konsep seperti di atas, kita perlu halaman register, halaman untuk mengisi kisah.
Halaman Untuk memuat kisah tentunya hanya bisa digunakan oleh member yang sudah terdaftar.
Simpan dulu halaman index (nantinya akan kita kasih form login dan image dan banner.
Jadi kita akan Membuat Halaman Register.
Label:
contoh konsep website
Membuat Layout Homepage
Kembali ke CodeCharge Studio (CCS). Dalam mode Design, hapus tulisan yang kita buat sebelumnya, sehingga halaman menjadi bersih.
Masuklah ke mode HTML (menu bagian bawah). Kita akan lihat kode html file index tersebut.
Edit lah bagian judul halaman.Yakni antara
<title>NewPage1</title> menjadi
<title>Daftar Teman</title> atau dengan judul lain terserah. Itu akan menjadi judul halaman yang muncul di atas browser kita. Untuk mengujinya, klik menu icon
LifePage
Lihat bedanya.
Kembali ke layout. Sederhananya layout dibuat dari tabel dengan 3 kolom dan 3 baris.
Header | ||
kolom kiri untuk menu dll |
isi | |
Footer |
Di CCS, Buat tabel dengan 3 kolom, 3 baris, border 0 dan width 100%
icon tabel sperti ini
Untuk menggabung (merge) baris, pilih baris pertama ke tiga kolomnya, klik kanan, pilih tabel, pilih merge. Demikian juga baris ketiga untuk footer.
Kita dapat mengatur ukuran kolom dengan cara meletakkan kursor di kolom tersebut, klik kanan, pilih <TD> Properties. Silahkan tentukan ukuran kolom dalam persen atau pixel. Dapat juga memberi warna, gambar atau garis kolom.
Sampai sini kita sudah punya layout sederhana untuk homepage kita.
Apa yang akan kita isikan di halaman ini? Bebas kawan, imajinasi dan kreatifitas adalah kuncinya.
Untuk web contoh ini, saya akan tempatkan:
- banner sebagai header,
- banner juga sebagai footer,
- di kolom kiri untuk login dan daftar kisah teman
- di kolom isi untuk image/gambar dan sedikit keterangan saja.
Sekarang hompage kita sudah punya layout. Berikutnya adalah "Konsep website"
Membuat halaman pertama / homepage
Tugas pertama untuk membuat halaman homepage adalah merename file tsb menjadi index (otomatis akan dibuat 3 file (index php, index.html dan index ccp). Ingat, rename hanya dengan nama file saja tanpa extensionnya.
Maksudnya adalah, index.ccp adalah file sourcenya untuk diedit, index.php adalah file yang berisi kode php dan index.html adalah template dari kode tersebut. Jangan Khawatir, kawan tidak perlu menulis kode sendiri, Codecharge studio (CCS) akan membuatkannya untuk kita.
Jika sudah punya file index, maka saat ini dihadapan kita terbentang ccs seperti ini.
Sebelah atas adalah menu-menu utama
Kolom kiri adalah daftar file atau halaman kita
Sebelah kanan adalah tool box
sebelah bawah terdapat menu Design (tempat kita mendisain), HTML adalah kode html sebagai template, Code adalah kode php yg dibuat otomatis, Preview adalah preview html, Life Page adalah tampilan kode php dan html kita.
Tool box terdapat Builders, Forms dan HTML. Terdapat banyak sekali fasilitas yang dapat kita gunakan. Untuk menerangkannya satu persatu tentulah akan sangat panjang. Kita akan memahaminya nanti pelan-pelan berikut contoh penggunaannya.
Di bawah tool box terdapat properties. Jika kita memilih satu object maka properti objek tersebut tampul di bagian properties ini. Terdiri dari Format, Data dan Events.
Untuk memahami cara kerjanya, di halaman index yang kosong tersebut tulislah sesuatu. misalnya "Ini adalah halaman homepage ku"
kemudian klik tombol save atau ctrl+s.
Kemudian Publish,
klik tombol Life Page
Browser internet akan muncul menampilkan alamat http://localhost
Jika halaman anda muncul, test sukses.
Jika tampil form setting publishing, berarti anda perlu setting ulang publishingnya.
Tulisan berikutnya adalah Membuat Layout Homepage
Setting Code Charge Studio Project
Icon setting project seperti ini:
Buka, seperti ini tampilannya
Kita bisa abaikan menu "General" ini karena kita tidak menggunakan template.
Langsung pilih "Publishing"
Setting Publishing ini sangat PENTING!.
Kemudian masuk ke menu "Connections"
Pilih "Add"
Kita harus isi form berikut:
Pada Tab Design,
Beralih ke Tab Server:
Maka akan muncul nama koneksi kita, defaultnya Connection1. Klik tombol Test untuk menguji sukses atau tidaknya.
Setingan yang lain untuk sementara dapat diabaikan dulu, sambil jalan nanti akan kita atur jika diperlukan.
Bersambung ke tulisan berikutnya, Membuat halaman pertama / homepage.
Buka, seperti ini tampilannya
Kita bisa abaikan menu "General" ini karena kita tidak menggunakan template.
Langsung pilih "Publishing"
Setting Publishing ini sangat PENTING!.
- Isikan Server Path ke folder publik di localhost wamp server, biasanya C:\Wamp\www
- Isi Server Url dengan http://localhost/
Kemudian masuk ke menu "Connections"
Pilih "Add"
Kita harus isi form berikut:
Pada Tab Design,
- Pilih database "MySQL.
- Klik Use ODBC Data Source Name
- Pilih daftarteman
- Username isi dengan Root
- Password kosongkan.
Beralih ke Tab Server:
- Isi Database or ODBC connection name dengan "daftarteman"
- Ini Host dengan "Localhost"
- Isi Login dengan "root"
- Klik "OK"
Maka akan muncul nama koneksi kita, defaultnya Connection1. Klik tombol Test untuk menguji sukses atau tidaknya.
Setingan yang lain untuk sementara dapat diabaikan dulu, sambil jalan nanti akan kita atur jika diperlukan.
Bersambung ke tulisan berikutnya, Membuat halaman pertama / homepage.
Mulai menggunakan codecharge
Siap? hehe. Biasa aja kalee. Wamp servernya nyalain ya...
Open Codechargestudio nya (nanti-nanti ditulis CCS aja ya.. kepanjangan).
Begitu muncul tampilan seperti gambar berkut ini, pilih "New project".
Menu berikutnya adalah isian tentang project baru kita.
Label:
codecharge project,
Memulai codecharge
Setup ODBC
Ada beberapa cara agar kita dapat menghubungkan php dengan database mysql. Dalam contoh membuat website dinamis menggunakan codecharge studio ini akan sangat mudah menggunakan database mysql yang dikoneksikan menggunakan odbc.
Asumsinya adalah kawan sudah menginstal odbc connector.
Asumsinya adalah kawan sudah menginstal odbc connector.
Label:
localhost,
php odbc,
wamp server
Membuat database mysql daftar teman kelas
Kawan silahkan menyalakan localhost wamp servernya. Jika sudah maka di tray kanan bawah layar akan muncul icon wamp.. klik jika warnanya sudah hijau. Maka akan muncul menu:
1. Localhost (menampilkan web yg ada dilocalhost)
2. phpMyAdmin (memuat aplikasi phpmyadmin).
3. www....
4. dlll
1. Localhost (menampilkan web yg ada dilocalhost)
2. phpMyAdmin (memuat aplikasi phpmyadmin).
3. www....
4. dlll
Hal pertama dan penting untuk membuat website dinamis menggunakan CodeCharge Studio
Saya asumsikan di pc atau laptop kawan sudah terinstal codecharge, wamp/xamp server (untuk localhost nya), mysql odbc (saya pake versi 5).
Dalam tulisan ini saya akan mencontohkan membuat website dinamis, artinya kita akan memiliki database. Meskipun codecharge mensupport banyak database, saya selalu menggunakan mysql. Penggunaan ms access hanya jalan di localhost atau di server windows (pakai bahasa asp).
Web contoh ini akan menggunakan php, server apache, database mysql.
Dalam tulisan ini saya akan mencontohkan membuat website dinamis, artinya kita akan memiliki database. Meskipun codecharge mensupport banyak database, saya selalu menggunakan mysql. Penggunaan ms access hanya jalan di localhost atau di server windows (pakai bahasa asp).
Web contoh ini akan menggunakan php, server apache, database mysql.
Label:
Perencanaan membuat website
Web yg saya buat pake codecharge studio
Bagi saya asik sekali menggunakan codecharge studio. Versi yg saya gunakan sampai saat ini bertahan di versi 4, itupun pake yang trial. versi trialnya hanya 20 hari kawan.
Rupa-rupa sistem database sudah saya buat menggunakan codecharge ini, baik penggunaan online ataupun untuk aplikasi desktop (yg ini tetap pakai localhost).
....
Subscribe to:
Posts (Atom)