2023 年における PHP による自動 Web ページ作成の総合ガイド

このページのリンクからサービスに加入すると、Reeves and SonsLimitedがコミッションを獲得する場合があります。 私たちを参照してください 倫理声明.

あなたがただウェブページがあるところに座っている以上の何かをするためにウェブページを必要とする人生の特定の時があります。 あなたはそのキープを獲得するためにそれが必要です。 そのためのXNUMXつの方法は、それを機能させることです。そのため、更新やページmodのたびにコードを渡す必要はありません。 このようなことを行う方法を学ぶ最も簡単な方法は実際にそれを行うことです。したがって、この記事の残りの部分では、タッチするだけで新しいWebページを構築するシステムを実装するXNUMXつの方法を紹介します。ボタン。

このシナリオでは、クライアントが年間を通じてさまざまな特別な機会にバウチャーを提供したいレストランであると想定します。 しかしもちろん、彼らは彼らのためにそれを更新するためにあなたにお金を払うことを望んでいないので、あなたは彼らのために更新を行うこの自動化システムのために十分に彼らに請求することを確認したほうがいいです

1.まず、基本的なWebページテンプレートを作成する必要があります。

これは単なる標準のWebページスケルトンです。 「pageBuilder.php」などの名前を付けることができます。 これにPHPを使用する必要はありません。 別のプログラミング言語を使用することもできますが、この例では、物事を単純に保ち、すべてPHPで実行します。

2016 05-30-1.56.52 AMでのスクリーンショット

2.ブートストラップを追加する

これにより、余分な作業をしなくてもフォームの見栄えが良くなります。 もちろん、これを機能させるにはBootstrapが必要です。

2016 05-30-1.56.56 AMでのスクリーンショット

3.コンテナーをセットアップする

すべてを整頓しておくために、ページのコンテンツを格納するコンテナを定義する必要があります。

2016 05-30-1.56.48 AMでのスクリーンショット

4. Webフォームを作成する

Webフォームを定義します。また、フォームにファンシーなタイトルを追加します。これはオプションですが、良い方法です。

2016 05-30-1.56.43 AMでのスクリーンショット

5.フォームフィールドを追加する

これは本当に簡単です。 ロボットが新しいWebページを作成するために使用するいくつかの基本的な詳細を収集する必要があります。 知っておく必要のあるデータは次のとおりです。

  • ページの背景画像
  • 祝われているイベントの名前
  • 見出し
  • 冒頭陳述
  • ちょっとした引用や追加のステートメント
  • 陳腐な引用の帰属
  • XNUMXつのフレーミングテキスト要素のそれぞれに使用するフォントスタイル(divi二重に)。
  • バウチャーが有効になる日付範囲
  • クーポンで宣伝されるオファー1およびオファー2。
  • 追加のバウチャーメッセージ(契約条件など)
  • 生成されるバウチャーQRコードのデータ

これがどのように見えるかです:

2016 05-30-1.56.00 AMでのスクリーンショット

2016 05-30-1.55.54 AMでのスクリーンショット

2016 05-30-1.55.36 AMでのスクリーンショット

そして、このすべての努力の結果、次のようなページができあがります。

2016 05-30-1.55.22 AMでのスクリーンショット

 

幸いなことに、仕事の半分は完了しました。これは最も困難で時間のかかる半分でした。 残りははるかに簡単です。

6.フォームプロセッサフ​​ァイルを作成する

フォームを作成した後、送信されたデータを処理してそれを処理するソフトウェアが必要です。 この場合、送信されたデータを使用して新しいデータを生成します HTML ページで見やすくするために変数を解析したりすることができます。

これは、データがリアルタイムで使用され、ユーザーに動的に反映される通常のPHP応答と同じではないことに注意してください。 代わりに、上書きするまで永続的に存在する静的ページを作成しています。

ファイルには、同じ名前を付ける必要があります アクション フォーム宣言の属性値なので、この例では バウチャーGen.php、そしてパスを指定しなかったので、同じ場所に保存する必要があります ページビルダー.php それが機能するために。

7.変数を初期化する

から提出されたデータ ページビルダー.php という連想配列として返されました $ _ POST、および配列内のすべてのデータ値は、HTMLフォームコントロールを介してアクセスできます。 属性。 したがって、変数の初期化は実際には非常に簡単です。 これもオプションですが、コードが少し整理されて読みやすくなります。 あなたは確かに直接作業することができます $ _ POST 必要に応じて値。

2016 05-30-1.55.15 AMでのスクリーンショット

 8.条件を使用して、フォントを正しい値に変更します

これを早期に行うと、後で時間と手間を節約できます。 選択された値を確認してから、実際のフォント名に置き換えます。

2016 05-30-1.55.10 AMでのスクリーンショット9. ジェネレーター文字列の作成を開始する

ここで行う必要があるのは、新しいページの作成に必要なすべてを含むXNUMXつの非常に長い文字列を作成することだけです。 文字列の連結を使用して読みやすくし、データ値が挿入された場所を簡単に確認できるようにします。 これは、基本的なHTMLページの設定から始まります。

2016 05-30-1.55.06 AMでのスクリーンショット

あなたはおそらく私たちがこれでどこに向かっているのかを見ることができます。 最後のセミコロンに注意してください。 それは重要です。 また、(CSS宣言またはクライアント側スクリプトの一部として)テキスト内に出現するセミコロンは、引用符で囲む必要があります。

10.ジェネレータ文字列へのページ本体の追加を開始します

この文字列を作成するより効率的な方法がありますが、読みやすいようにコードを整理するのが好きです。 これを行うには、簡単な方法を使用できます。また、手順9とは別のプロセスとして行う必要もありません。ページのさまざまなセクションをこのように分割すると、理解しやすくなります。

2016 05-30-1.55.00 AMでのスクリーンショット

11. HTMLにジェネレーター文字列を書き込む

この場合、ファイル名をハードコーディングしていますが、これをpageBuilderフォームのフィールドにすることができます(おそらくそうする必要があります)。

2016 05-30-1.54.55 AMでのスクリーンショット

12.テストリンクを追加する

BUILD ITボタンをクリックすると、通常のPHPプログラムのようにWebページにリダイレクトされないため、リンクまたは何かを追加して、結果を確認する必要があります。

2016 05-30-1.54.50 AMでのスクリーンショット

13.カスタムCSSファイルを作成する

このファイルには追加のスタイリング指示を格納できますが、現時点では唯一の重要なものは、 メイン DIV。

2016 05-30-1.54.45 AMでのスクリーンショット

14. wrap.pngを作成してアップロードする

これが適切に機能するためには、単一の半透明ピクセル画像を作成して名前を付ける必要があります ラップ.png 次に、指定したパスにアップロードします custom.cssは ファイルにソフトウェアを指定する必要があります。

15.適切な背景画像をアップロードし、pageBuilderをテストします

ほぼ完了したことを知ってワクワクするでしょう。実際には、発生したエラーをテストして修正するだけです。 忙しすぎず、特別なイベントや行事に関連するのに適した、素敵でシンプルな画像をいくつか選択してください(この例では、母の日と父の日を選びました)。 Webサイトの画像を保存するパスに画像をアップロードします。 次に、フォームに入力し、ボタンをクリックして、何が起こるかを確認します。 これは、すべてのデータフィールドが入力されたフォームの例です。

Picture1

これにより、次のようなものが作成されます。

2016 05-30-1.54.11 AMでのスクリーンショット

すべてを最初から入力するのは望ましくないだろうとすでに推測しているので、pageBuilder.phpとvoucherGen.phpのソースコードをダウンロードできます。 zipファイル.

HTMLファイルを文字列として作成し、さまざまな状況でファイルに書き出すというこの手法を適用できます。 このようなものを再帰ループに入れないように注意してください。そうしないと、ハードドライブがいっぱいになり、サーバーがクラッシュします。

コメント 2応答

  1. Ufasウェブマスター 言います:

    Trèstrèsinstructif、j'aiessayéetçamarcheàmerveille、milles merci

    1. ボグダン・ランセア 言います:

      どういたしまして! 👍👍👍

コメントを残す

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

評価 *

このサイトでは、スパムを減らすためにAkismetを使用しています。 コメント処理方法.