Diem CMSでのWebサイト開発:利点、哲学、例、落とし穴

Diem CMSと呼ばれるフランスのWeb開発者グループの素晴らしいイニシアチブに関するストーリーの続き。

この記事はあなたを待っています


-Diemがウェブマスターの生活を楽にする方法のいくつかの例
-あなたが遭遇するかもしれない落とし穴、および可能な解決策
-Diemが同僚と根本的に異なる(より良い)方法についてのいくつかの哲学的議論
-トピックに関連する興味深い事実
-スクリーンショットとコード例とともに
それはボリュームがあり、実質的であることが判明しました。

練習する


まえがき
過去2か月で、このCMSに5ページから2,000ページまでの6つのサイトを作成しました。2つのサイトは共有ホスティングに、2つはVPSサーバーにあります。 どこでも128 MBのメモリ。
タール
ああ、この慣行は、現時点での従来の共有ホスティングでのDiemの使用はうまくいきません...
第一に、48 MB未満のメモリ制限はFatal error: Allowed memory size of X bytes exhaustedを引き起こす可能性がありFatal error: Allowed memory size of X bytes exhausted 、約8 MBがページメンテナンスに使用されますが、システムコール(設定の更新、検索スキャンZend_Search_Luceneなど)はより多くのメモリを使用します(可能性があります)一部の場所では、開発者は長いサイクル中にメモリの充填を制御するのを忘れていました)
第二に、標準の./configure設定でAPCキャッシングが存在しない場合、Diemは約2秒間ページを処理します(これは同様の構成で200msですが、APCで) これは私の推測です、実際には、スクリプトは2000msの仮想ホスティングで実行され、VPS 200msではAPCがあちこちにインストールされていますが、共有ホスティングのPOSIX共有メモリのシステムサポートはありません。 これは事実だと思いますが、他のオプションは除外されていません。
異なる構成でAPCを構成する過程で、このドキュメントは何が起こっているかを理解するのに役立ちました。
画像 facebook APCキャッシングに関するfacebookの詳細なレビューと研究
はちみつ
快適から:システムの明らかな重さにもかかわらず、reg.ruから最も安いVPSで、私は静かに5つのサイトと仲良くなり、すべての人に十分なメモリがあり、ページはリクエストの200ms後に返されます。 Diemには不利な点よりも多くの利点があることを考えると、この事実に非常に満足しています。これについては、これではなく、以下の投稿で説明します。
小さくても反応の良いコミュニティも楽しいです。 応答の速さから判断すると、デベロッパーは毎日コミュニティにアクセスし、Googleに送信されるのではなく、応答する意思があります。 (Provlinki: 1、2

Symfonyの最高の伝統では、Diemは以下を含む高品質で明確なドキュメントに支えられています。
-週ディエム
7日間で開発に没頭し、実際には2時間で毎週のコースのすべてのステップを行うことができます
-一般的なタスクの使い方のヒント
-およびCMSのすべての機能の詳細なステップバイステップの説明

さらに、コミュニティにアドバイスを求めることができるフォーラムとGoogleグループがあります。
これはすべてoff.site diem-project.orgにあります

そうそう。 diem-project.ruが英語が苦手な人にとって有用であることを完全に忘れていました-diem-project.orgの部分的に翻訳されたクローン、その作成者Vladislav Lezhnevは最後の投稿の後に連絡を取り、Diemについて少し話し、基本的に同意しましたこのCMSは注目に値するものであり、使用すべきであるとの意見。

画像 興味深い事実:プロジェクトの大部分は、2009年8月23日から2010年1月31日までの期間に1人によって作成され、その後、さらに5人の開発者がプロ​​ジェクトに登場しました。

哲学


コンテンツ管理の主なアイデアはブロッキングです。 従来のCMSでアトミックコンテンツユニットがページ(テキストでもフォトギャラリーでも)であり、ページ上のブロックの使用が追加で実装され、多くの場合非常に不便な場合、Diemではアトミックコンテンツはブロックです(ウィジェットでもあります)。

その結果、コンテンツ構造は次のようになります。テンプレート->ゾーン->ページ->ウィジェット

たとえば、2列と3列の2つのテンプレートを作成し、ウィジェットを配置できるページゾーンを決定しました。 これでコーディングが終了し、サイトの管理が開始されます。 ページを作成し、必要なブロックをゾーンにドラッグアンドドロップし、ブロックを個別に編集できます。 特別な機能が必要な場合は、モジュール(以下のモジュール開発の例)を作成します。モジュールは、ブロックとこのブロックのコンテンツの特定の処理を行います。 そして、新しい特定のブロックを必要な場所に、必要なときに追加します。 クライアント顧客はこれを行うことができます。

たとえば、以前はサイドバーでいくつかのブロックを交換する必要がしばしばありました(ブロックの場所はテンプレートでハードコーディングされていました)。もちろん、これは迅速かつ簡単に行われましたが、ハンドルとコードで行われました。 そして、ここに短所があります:顧客のための長い変化、編集中にエラーを起こす可能性。 これで、クライアント自身が必要に応じてブロックを所定の場所に再配置できます。

ページコンテンツの管理の例を示します。


この図では、ページがゾーンとウィジェット(ブロック)に分割されており、それらをドラッグできることがわかります。


この図では、開いているメディアギャラリー、パンくずリストウィジェット編集ウィンドウ、およびページに追加できるウィジェットパネルが表示されています。

独自のモジュールを作成しようとしています


最後のプロジェクトの生涯から例を挙げます。国ごとの部門と、当然のことながら管理の可能性を備えたホテルのデータベースを作成する必要があります。 これにはどれくらい時間がかかると思いますか? 見てみましょう...

ステップ1
まず最初に、データベースを設計します(DoctrineとYAMLファイルを使用して、これを行うのは楽しいです):
Hotel :<br/> actAs : [ DmSortable, DmGallery ] <br/> columns :<br/> name : { type : string( 255 ), notnull : true } <br/> country_id : { type : integer } <br/> url : { type : string( 255 ) } <br/> text : { type : clob, extra : ckeditor } <br/> is_active : { type : boolean, notnull : true , default : true } <br/> rating : { type : float } <br/> status : { type : integer( 4 ), default : 0 } <br/> votes : { type : integer } <br/> relations :<br/> Products : { foreignAlias : Hotels, class : Product, refClass : ProductHotel } <br/> Country : { foreignAlias : Hotels } <br/> <br/> Country :<br/> columns :<br/> name : { type : string( 255 ), notnull : true } <br/> slug : { type : string( 255 ), notnull : true } <br/>


ホテルのテーブル、国のテーブル、それらの間の関係など、必要なものはすべて示されたようです。 このコードには、 is_active, DmSortable, DmGallery extra: ckeditor.プロジェクト全体のテーブルの動作をグローバルに定義するいくつかのDiem表記が含まれていますis_active, DmSortable, DmGallery extra: ckeditor.
is_activeの意味は、ホテルのリストには「アクティブ」オブジェクトと「非アクティブ」オブジェクトがあることを今やdiemが知っているという事実にあります。 管理下で、ajaxアクティビティを介して管理することができ、ページで表示すると、アクティブなレコードのみが表示されます。
extra: ckeditorは編集時にextra: ckeditor追加します。
DmSortableホテルのリストを手動でソートできます
DmGallery無制限の数の写真を各ホテルに添付できます。 すべてのファイルは、Mediaコンポーネントを使用してDiemに保存および管理されます。 画像をロードしたり、さまざまな方法を使用してサイズにトリミングしたりするために独自のハンドラーを記述する必要はありません。さらに、テンプレートでは任意のサイズの画像を指定できます。

ステップ2
次に、 モジュールとコンポーネントのエントリを整理する方法をシステムに指示する必要があります 。これは、対応する設定ファイルでYAMLを使用して再度行われます。

"" :<br/> <br/> hotel :<br/> model : Hotel<br/> page : true <br/> name : '|' <br/> admin : true <br/> components :<br/> searchForm :<br/> name : ' ' <br/> searchResults :<br/> name : ' ' <br/> show :<br/> <br/> country :<br/> model : Country<br/> name : '|' <br/> admin : true <br/>


私たちがやったこと:ホテルのエントリはページであり、ホテルと国には管理インターフェースが必要であり、フロントエンドにはホテルビュー、ホテル検索フォーム、検索フォーム結果のブロックが必要だと彼らは言いました。 さらに、キーワードlist showフロントエンドのコンポーネント名でのlist showにより、リストまたは単一オブジェクトの選択を自動的に生成できます(データベースクエリを記述する必要はありません)。

データベーススキーマとモジュールスキーマの説明の後、コンソールで実行します。
symfony doctrine:generate-migrations-diff
symfony doctrine:migrate
symfony dm:setup


生成されたORMモデル、フィルター、Doctrineフォーム、ホテルおよび国を管理するための管理モジュールを、必要なアクションとテンプレートのすべてのセットとともに取得します。




20分間の時間と約200文字の印刷で悪くありません。 私は怠laな人として、標準機能を生成する可能性を喜んでおり、強力で高品質の機能を愛する人として、私はショックを受けました、たとえば、特定のフィールドによるフィルタリング、すべてのコンテンツでのフルテキスト検索も可能ですモジュール。

「そしてこれだけではありません!」(C)
ギフトとして、フロントエンド用に生成されたテンプレートを取得し、ページの任意の領域にドラッグアンドドロップできるようになります。 残念ながら、Diemは心の読み方、タイプセット、およびデザインの作成方法を知りません。したがって、この作業は自分で行う必要がありますが、ここでは嬉しい驚きがあります。 なぜなら この記事は既に肥大化しています。「ホテルリスト」ブロックの例を挙げます。

<?php <br/> <br/> echo _open( 'div.product_list' );<br/> <br/> echo _open( 'ul.smartcolumns' );<br/> <br/> foreach ( $hotels as $hotel )<br/>{<br/> $url = _link( $hotel )->getHref();<br/> $data = 'infotext' ;<br/> <br/> ?> <br/> <li style= "cursor:pointer;" onclick= "window.location = '<?php echo $url ?>';" ><div class = "block hotel" ><br/> <a href= "<?php echo $url ?>" ><br/> <?php if ( $hotel ->getNbMedias()) echo _media( $hotel ->getFirstMedia())->width( 100 ) ?> <br/> </a><br/> <div class = "txt" ><br/> <a href= "<?php echo $url ?>" ><b class = "name" > <?php echo $hotel ->name ?> </b></a><br /><br/> <div class = "txt2" > <?php echo $hotel ->rating ?> </div><br/> <?php echo $data ?> <br /><br/> </div><br/> </div></li><br/> <?php <br/>}<br/> <br/> echo _close( 'ul' );<br/> <br/> echo _close( 'div' );<br/> <br/>use_javascript( '/js/smartcolumns.js' ); <br/>


そして、検索フォームをオートコンプリートするアクションの例:
<?php

/ **
*ホテルアクション
* /
クラス hotelActions myFrontModuleActionsを拡張します
{

パブリック 関数 executeAutocomplete dmWebRequest $ request
{
$ query = $ request- > getParameter 'query' 0 ;
if $ query
{
$制限 = 10 ;
$ q = RequestFilter :: sanitizeString $ query ;

$ query = Doctrine_Query :: create
-> 選択 'h.id、h.name'
-> 'Hotel h' )から
-> where "LOWER(name)REGEXP '^ {$ q} 。* | [^-] [-] {$ q} [^)] * $'"
-> orderBy 'h.rating DESC、h.name ASC'
-> limit $ limit ;

$ res = $ query- > execute ;

if count $ res
{
$ json = array
'提案' => 配列
'data' => 配列
;

foreach $ res as $ key => $ val
{
$ json [ 'suggestions' ] [ ] = $ val- > name ;
$ json [ 'data' ] [ ] = $ val- > id ;
}

$ this- > getResponse -> setContentType 'application / json' ;
return $ this- > renderText json_encode $ json ;
}
}

return sfView :: NONE ;
}

}


説明したすべての機能のレイアウトとアクションには約2時間かかりました。

落とし穴


一言で言えば、開発中にどんな困難が待ち受けているかを示します(システムは未加工でオープンソースのままです)

1.ロード時に、ロシア語のファイルの名前は変更されません。URLの生成時に、もちろんurl-valid文字への変換が発生しますが、一部のファイルがロード後に単純に消えるという問題がありました。 より正確には、ファイルシステムとデータベースに残っていましたが、Diemはそれらを認識しませんでした。 ここでの理由は、mb_string_functionsの代わりに非推奨の関数を使用しているためだと思います。 フランス人はUTF-8の行に出会うはずでしたが...一般に、私はあまり掘り下げなかったので、ファイル名をurlの有効な文字に変換することで扱われました(a-z0-9_-

2.メディアギャラリーにアクセスするたびのメモリ消費量は、ファイルの増加とともに増加します。これは、大規模なプロジェクトでは受け入れられません。 500MBの画像を含むホテルのデータベースの場合、メディアライブラリは開くことを拒否しました。
コードを詳しく調べてみると、ライブラリオブジェクトにアクセスするたびに同期呼び出しが見つかりました。これにより、データベース内のストレージのフォルダーとファイルの構造に関する情報が最新になります(突然FTP経由でファイルをアップロードします)。
ものはリソース集約型であり、それほど必要ではありません。 ファイルは管理インターフェイスからのみダウンロードされることになっています。同期のために行をコメントアウトして落ち着かせてください。

3. Diemは、すべてのCSSおよびJavaScriptファイルを縮小および結合して、ページのレンダリングを高速化します。 また、Yahooのオタクから教えられたように、ページの最後にjavascriptが含まれています。 テンプレートでjavascriptを使用し、jQueryを使用する場合は、ページヘッダーでjqueryライブラリを接続する必要があります。 これを行うには、config / dm / config.ymlで、ヘッダーに含めるJavaScriptファイルを指定する必要があります。 Google CDNの使用を指定して、jqueryライブラリをそこにダウンロードすることもできます。

まとめ


1.これで、Diem CMSとは何か、このCMSを使用して得られる開発上の利点、およびコンテンツ管理パラダイムが他のCMSとどのように異なるかがわかりました。
2. VPSまたは専用サーバーでDiemを使用できることはわかっていますが、共有ホスティングでは試さない方が良いでしょう。 (ただし、実験のために、ホスティングでページを生成するのにかかる時間をミリ秒で知ることは誰もが興味を持っていると思います)
3.あなたはあなた自身のモジュールを開発する例に精通しました、そして私は、Diemであなたがこれをあなたの完全な手で簡単かつ迅速にできることを確認したことを望みます。
4.あなたは、どのような困難が生じる可能性があり、それらを克服するかを学びました。

私が伝えたいことのすべてがこの記事に当てはまるわけではありません。 SEOの最適化、ユーザーアクセス制御の設定、およびレイアウトのバグを解消するための小さなCSSの変更に関する質問は、説明されていませんでした。 これらのトピックを次の記事に収める予定です。

PS:エラーを見た人は誰でも黙って個人的な手紙を書くことはできません-私は感謝し、すぐにそれを修正します。

Source: https://habr.com/ru/post/J118955/


All Articles