Pembuatan Halaman Web Automatik dengan PHP

Ada masa-masa tertentu dalam hidup apabila anda memerlukan laman web untuk melakukan sesuatu yang lebih dari sekadar duduk di sana menjadi laman web. Anda memerlukannya untuk mendapatkan simpanannya. Salah satu cara untuk melakukannya adalah dengan menjadikannya berfungsi untuk anda, jadi anda tidak perlu memberikan kod setiap kemas kini atau mod halaman. Cara termudah untuk belajar bagaimana melakukan sesuatu seperti ini adalah dengan benar-benar melakukannya, jadi dalam artikel ini, saya akan menunjukkan kepada anda satu cara untuk melaksanakan sistem yang akan membina laman web baru untuk anda dengan sentuhan butang.

Dalam senario ini, kami menganggap pelanggan anda adalah restoran yang ingin menawarkan baucar untuk pelbagai majlis khas sepanjang tahun. Tetapi tentu saja mereka tidak mahu membayar anda untuk memperbaruinya, jadi anda lebih baik memastikan untuk menagihnya dengan cukup untuk sistem automasi ini yang akan melakukan pembaruan untuk mereka

1. Pertama kita perlu membuat templat halaman web asas.

Ini hanyalah kerangka halaman web standard. Anda boleh memberikannya nama seperti "pageBuilder.php" atau sebagainya. Anda tidak perlu menggunakan PHP untuk ini. Anda boleh menggunakan bahasa pengaturcaraan yang lain, tetapi untuk contoh ini kami akan mempermudah dan melakukan semuanya dalam PHP.

Screen Shot 2016-05-30 pada 1.56.52 AM

2. Tambah Bootstrap

Ini akan membantu menjadikan bentuk kelihatan lebih baik tanpa kerja tambahan. Sudah tentu anda perlu mempunyai Bootstrap agar ini berfungsi.

Screen Shot 2016-05-30 pada 1.56.56 AM

3. Sediakan bekas

Untuk memastikan semuanya kemas dan rapi, kita harus menentukan wadah tempat kita akan menyimpan kandungan halaman.

Screen Shot 2016-05-30 pada 1.56.48 AM

4. Buat borang web

Tentukan borang web, dan kami juga akan menambahkan tajuk mewah pada borang, yang merupakan pilihan tetapi idea yang baik.

Screen Shot 2016-05-30 pada 1.56.43 AM

5. Tambahkan medan borang

Ini sangat mudah. Kita hanya perlu mengumpulkan beberapa butiran asas yang akan digunakan robot untuk membuat laman web baru. Data yang perlu kita ketahui merangkumi:

  • Gambar latar untuk halaman
  • Nama acara yang disambut
  • Headline
  • Pernyataan pembukaan
  • Sebilangan petikan atau pernyataan tambahan
  • Atribusi untuk petikan sopan
  • Gaya fon untuk digunakan untuk setiap empat elemen teks pembingkaian (dalamdivisecara berkala).
  • Julat tarikh yang sah untuk baucar
  • Tawaran 1 dan Tawaran 2 yang akan diiklankan di baucar.
  • Mesej baucar tambahan (terma dan syarat, misalnya)
  • Data untuk kod QR baucar yang akan dihasilkan

Begini rupa:

Screen Shot 2016-05-30 pada 1.56.00 AM

Screen Shot 2016-05-30 pada 1.55.54 AM

Screen Shot 2016-05-30 pada 1.55.36 AM

Dan setelah semua usaha ini, kami akan berakhir dengan halaman yang kelihatan seperti ini:

Screen Shot 2016-05-30 pada 1.55.22 AM

 

Berita baiknya ialah separuh pekerjaan sekarang sudah selesai, dan ini adalah separuh yang paling sukar dan memakan masa. Selebihnya jauh lebih mudah.

6. Buat fail pemproses borang

Setelah membuat borang, anda memerlukan beberapa perisian yang akan memproses data yang dihantar dan melakukan sesuatu dengannya. Dalam kes ini, kami akan menggunakan data yang dihantar untuk menghasilkan yang baru HTML .

Sekarang, ingat bahawa ini bukan perkara yang sama dengan tindak balas PHP biasa di mana data digunakan dalam masa nyata dan ditunjukkan kepada pengguna secara dinamik. Sebaliknya, kami membuat halaman statik yang akan wujud secara kekal sehingga kami menimpanya.

Fail mesti dinamakan sama dengan tindakan nilai atribut dalam bentuk perisytiharan, jadi dalam contoh kita yang demikian voucherGen.php, dan kerana kami tidak menentukan jalan, jalan tersebut harus disimpan di lokasi yang sama dengan pageBuilder.php untuk berjaya.

7. Memulakan pemboleh ubah

Data yang dihantar dari pageBuilder.php dikembalikan sebagai array asosiatif yang dipanggil $ _ POST, dan semua nilai data dalam array dapat diakses melalui kontrol bentuk HTML mereka nama sifat. Oleh itu, memulakan pemboleh ubah kita sebenarnya agak mudah. Ia juga pilihan, tetapi hanya menjadikan kodnya kelihatan lebih kemas dan senang dibaca. Anda pasti boleh bekerja secara langsung dengan $ _ POST nilai jika anda lebih suka.

Screen Shot 2016-05-30 pada 1.55.15 AM

 8. Gunakan bersyarat untuk menukar fon ke nilai yang betul

Melakukannya lebih awal akan menjimatkan masa dan masalah kemudian. Kami hanya memeriksa nilai mana yang dipilih dan kemudian menggantinya dengan nama fon yang sebenarnya.

Screen Shot 2016-05-30 pada 1.55.10 AM9. Mula membina rentetan penjana

Yang benar-benar perlu kita lakukan di sini adalah membuat satu rentetan panjang yang akan mengandungi semua yang diperlukan untuk membuat halaman baru. Kami akan menggunakan penggabungan rentetan untuk membuatnya dapat dibaca dan memudahkan untuk melihat di mana nilai data telah dimasukkan. Ini bermula dengan penyediaan halaman HTML asas:

Screen Shot 2016-05-30 pada 1.55.06 AM

Anda mungkin dapat melihat ke mana kita pergi dengan ini. Perhatikan titik koma di hujung. Yang penting. Juga tanda titik koma yang terdapat di dalam teks (sebagai sebahagian daripada deklarasi CSS atau skrip sisi pelanggan) mesti terdapat di dalam tanda petik.

10. Mula menambahkan badan halaman ke rentetan penjana

Terdapat kaedah yang lebih cekap untuk membina rentetan ini, tetapi saya suka membuat kod yang kemas, supaya senang dibaca. Anda boleh menggunakan kaedah tangan pendek untuk melakukan ini, dan anda juga tidak perlu melakukannya sebagai proses yang terpisah untuk melangkah 9. Saya rasa lebih mudah difahami apabila bahagian halaman yang berlainan dibahagi dengan cara ini.

Screen Shot 2016-05-30 pada 1.55.00 AM

11. Tulis rentetan penjana ke HTML

Dalam kes ini, kami mengekodkan nama fail dengan sukar, tetapi anda boleh (dan mungkin harus) menjadikan ini sebagai medan dalam bentuk halaman Pembangun anda.

Screen Shot 2016-05-30 pada 1.54.55 AM

12. Tambahkan pautan ujian

Apabila anda mengklik butang BUIL IT, kerana tidak mengalihkan ke laman web seperti program PHP biasa, anda perlu menambahkan pautan atau sesuatu untuk pergi dan melihat hasilnya.

Screen Shot 2016-05-30 pada 1.54.50 AM

13. Buat fail CSS tersuai

Anda boleh menyimpan arahan gaya tambahan dalam fail ini, tetapi buat masa ini satu-satunya yang penting adalah arahan gaya untuk utama div.

Screen Shot 2016-05-30 pada 1.54.45 AM

14. Buat dan muat naik wrap.png

Agar ini berfungsi dengan betul, anda perlu membuat satu gambar piksel lut dan menamakannya balut.png kemudian muat naik ke jalan yang anda nyatakan di custom.css fail.

15. Muat naik beberapa gambar latar yang sesuai dan uji laman Pembina anda

Anda akan gembira mengetahui bahawa kami hampir selesai, dan sekarang ini hanya masalah untuk menguji dan memperbaiki kesilapan yang berlaku. Pilih beberapa gambar mudah yang tidak terlalu sibuk dan sesuai untuk acara atau majlis khas (dalam contoh kami, saya telah pergi bersama Hari Ibu dan Hari Bapa). Muat naik gambar ke jalan di mana anda menyimpan gambar anda ke laman web anda. Kemudian isi borang, klik butang, dan lihat apa yang berlaku. Berikut adalah contoh borang dengan semua bidang data diisi.

Picture1

Yang seharusnya menghasilkan sesuatu yang serupa dengan ini:

Screen Shot 2016-05-30 pada 1.54.11 AM

Kami sudah menduga anda tidak mahu menaip semua itu dari awal, jadi anda boleh memuat turun kod sumber untuk pageBuilder.php dan voucherGen.php dalam ini fail zip.

Anda boleh menggunakan teknik membuat fail HTML sebagai rentetan dan kemudian menuliskannya ke fail dalam semua jenis situasi. Hati-hati jangan sekali-kali meletakkan sesuatu seperti ini dalam gelung berulang atau anda akan mengisi cakera keras anda dan merosakkan pelayan.

Catalin Zorzini

Saya seorang blogger reka bentuk web dan memulakan projek ini setelah menghabiskan beberapa minggu berjuang untuk mengetahui yang mana platform e-dagang terbaik untuk diri saya sendiri. Lihat semasa saya 10 pembangun laman web e-dagang teratas.