Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)
इस यी2(Yii2) श्रृंखला के साथ प्रोग्रामिंग में, मैं पाठकों को PHP के लिए यी2(Yii2) फ्रेमवर्क के उपयोग में मार्गदर्शन करता हूं। आपको Yii फ्रेमवर्क के बारे में भी दिलचस्पी हो सकती है, जो Yii के लाभों की समीक्षा करती है और इसमें Yii 2.x में नया क्या है, इसका अवलोकन शामिल है।
परिचय
आज के ट्यूटोरियल में, मैं आपको यह दिखाने वाला हूँ कि यी(Yii) को आसानी से एक साइट की नकल, टिप्पणियों, और साझाकरण के साथ रेडडिट जैसी नकल करने मे कैसे उपयोग करें।
हाल ही में, मैं महान Yii उन्नत टेम्पलेट का अपना व्यक्तिगत विस्तार बनाने पर काम कर रहा हूं। टेम्पलेट अंतर्निहित उपयोगकर्ता पंजीकरण और प्रमाणीकरण और फ्रंट-एंड और प्रशासनिक वेबसाइट्स के लिए एकाधिक साइट प्रदान करता है।
मैंने इस मंच के शुरुआती संस्करण पर अपने नवीनतम ट्विटर एपीआई एपिसोड का निर्माण किया, उपयोगकर्ताओं की ओर से मित्रों के अनुसरण में और हमारे अनुयायियों का विश्लेषण करने के लिए। साइट मैं उन में वर्णित है, Twixxr, मेरे यी(Yii) अनुकूलन कार्य की नींव रूप है।
तो वोटिंग, टिप्पणियां और साझा करना जैसे मुख्य कार्यप्रणाली को जोड़ना इतना समझ में आता है।जैसा कि आप इन प्रकार के सुविधाओं के साथ अपने यी(Yii) कोडबेस(codebase) का विस्तार करते हैं, नई साइट्स का निर्माण तेजी से, आसान और तेजी से शक्तिशाली हो जाता है।
प्रारंभ करना
मैं तीन यी2 प्लगइन्स(Yii2 plugins) के उपयोग के माध्यम से आपको चलने जा रहा हूं:
- चिलिएक के यी2(Yii2) वोटिंग एक्सटेंशन (Chiliec's Yii2 Voting Extension)
- अमिगोजयी 2(Yii2) डिस्कस टिप्पणियाँ एक्सटेंशन (2Amigos Yii2 Disqus Comments Extension)
- कार्तिक यी2 सामाजिक विस्तार (Kartik's Yii2 Social Extension)
वे इसे अपेक्षाकृत तेज और आसान बनाने के लिए Yii2 पर एक शक्तिशाली सामाजिक समुदाय बनाते हैं।
मैंने item नामक एक मॉडल बनाया है जो एक ऐसे ऑब्जेक्ट का प्रतिनिधित्व करता है जिसे आप चाहते हैं कि उपयोगकर्ता वोट करें, टिप्पणी करें और साझा करें।
सच कहूँ तो, मेरे मंच में इन सुविधाओं के साथ आइटम पृष्ठों को बनाने के बाद, मैं यी(Yii) के साथ पहले से कहीं अधिक प्रभावित हुआ ... अधिक समय तक मेरी स्टार्टअप सीरीज़ बनाने की तुलना में प्रभावित हुआ। आप इस ढांचे के साथ इतना कुछ कर सकते हैं।
चलो और जाने
एक्सटेंशन स्थापित करना
सबसे पहले, चलो एक साथ सभी तीन एक्सटेंशन composer.json को जोड़ते हैं:
1 |
{
|
2 |
"name": "yiisoft/yii2-app-advanced", |
3 |
"description": "Yii 2 Advanced Project Template", |
4 |
"keywords": ["yii2", "framework", "advanced", "project template"], |
5 |
"homepage": "https://www.yiiframework.com/", |
6 |
"type": "project", |
7 |
"license": "BSD-3-Clause", |
8 |
"support": { |
9 |
"issues": "https://github.com/yiisoft/yii2/issues?state=open", |
10 |
"forum": "http://www.yiiframework.com/forum/", |
11 |
"wiki": "http://www.yiiframework.com/wiki/", |
12 |
"irc": "irc://irc.freenode.net/yii", |
13 |
"source": "https://github.com/yiisoft/yii2" |
14 |
},
|
15 |
"minimum-stability": "stable", |
16 |
"require": { |
17 |
"php": ">=5.4.0", |
18 |
"yiisoft/yii2": ">=2.0.10", |
19 |
"yiisoft/yii2-bootstrap": "*", |
20 |
"yiisoft/yii2-swiftmailer": "*", |
21 |
"yiisoft/yii2-authclient": "~2.1.0", |
22 |
"google/apiclient": "1.0.*@beta", |
23 |
"machour/yii2-google-apiclient":"@dev", |
24 |
"machour/yii2-google-gmail": "@dev", |
25 |
"ruskid/yii2-stripe": "dev-master", |
26 |
"2amigos/yii2-disqus-widget":"~1.0", |
27 |
"abraham/twitteroauth":"*", |
28 |
"codeception/codeception":"*", |
29 |
"notamedia/yii2-sentry": "^1.1", |
30 |
"chiliec/yii2-vote": "^4.0", |
31 |
"yiidoc/yii2-redactor": "*", |
32 |
"kartik-v/yii2-social": "@dev" |
तब चलाऐ composer update ।
वोटिंग जोड़ना
व्लादिमीर बबिन चिलिएक है, और मुझे बहुत पसंद है जैसे वे और दूसरों ने इस प्लगइन को बनाने के लिए सहयोग किया है। आप चाहते हैं कि सभी बुनियादी सुविधाओं को शामिल किया गया है, और आप आसानी से इसे अनुकूलित कर सकते हैं, विशेष रूप से दृश्य ओवरराइड द्वारा। उनके पास महान दस्तावेज हैं और इसे अच्छी तरह से अद्यतन भी रखें।
यहां प्लगइन की डिफ़ॉल्ट विशेषताओं का एक उपयोगी एनिमेटेड जीआईफ़ है जो वे गीथहब पर होस्ट करते हैं। मैंने नीचे एक स्थिर छवि पोस्ट की है (एनवाटो टट्स+ हमारे ट्यूटोरियल में जीफ का समर्थन नहीं करता है)।
बेशक, मैंने इस दृश्य को अनुकूलित करने और वोटों को खत्म करने का निर्णय लिया, और यह काफी आसान था।
कॉन्फ़िगरेशन
इसके बाद, हम /active/config/main.php में मतदान प्लगइन जोड़ते हैं ताकि यह बूटस्ट्रैप में हर जगह लोड हो और हमारे एप्लिकेशन के लिए कॉन्फ़िगर किया जा सके:
1 |
return [ |
2 |
'id' => 'app-active', |
3 |
'basePath' => dirname(__DIR__), |
4 |
'bootstrap' => ['chiliec\vote\components\VoteBootstrap', |
5 |
'log','\common\components\SiteHelper'], |
6 |
'modules' => [ |
7 |
... |
8 |
'vote' => [ |
9 |
'class' => 'chiliec\vote\Module', |
10 |
// show messages in popover |
11 |
'popOverEnabled' => true, |
12 |
// global values for all models |
13 |
// 'allowGuests' => true, |
14 |
// 'allowChangeVote' => true, |
15 |
'models' => [ |
16 |
1 => [ |
17 |
'modelName' => \active\models\Item::className(), |
18 |
'allowGuests' => false, |
19 |
], |
20 |
// example declaration of models |
21 |
// \common\models\Post::className(), |
22 |
// 'backend\models\Post', |
23 |
// 2 => 'frontend\models\Story', |
24 |
// 3 => [ |
25 |
// 'modelName' => \backend\models\Mail::className(), |
26 |
// you can rewrite global values for specific model |
27 |
// 'allowGuests' => false, |
28 |
// 'allowChangeVote' => false, |
29 |
// ], |
30 |
], |
31 |
], |
32 |
आप देख सकते हैं कि मैंने अतिथि मतदान को बंद कर दिया है ताकि लोगों को आइटम पर वोट करने के लिए साइन अप करना होगा।
डेटाबेस एकीकरण
इसके बाद, आपको तालिकाओं को बनाने के लिए डेटाबेस प्रवास चलाया जाना है जो वोटों को ट्रैक करते हैं।
1 |
$ php yii migrate/up --migrationPath=@vendor/chiliec/yii2-vote/migrations |
अपने उत्पाद सर्वर को स्थापित करते समय इस माइग्रेशन को चलाने के लिए याद रखना महत्वपूर्ण है! यह भूलना काफी आसान है।
वोटिंग विजेट प्रदर्शित करना
मेरा आइटम मॉडल एक संग्रह मॉडल का हिस्सा है जिसे विषय कहा जाता है, ताकि आप मेरे वोटिंग विजेट के लिए आंशिक दृश्य खोज सकें /views/topic/_item.php:
1 |
<?php
|
2 |
use yii\helpers\Html; |
3 |
use yii\helpers\HtmlPurifier; |
4 |
use dosamigos\disqus\CommentsCount; |
5 |
use kartik\social\TwitterPlugin; |
6 |
use kartik\social\FacebookPlugin; |
7 |
use yii\helpers\StringHelper; |
8 |
|
9 |
?>
|
10 |
<div class="item_row row"> |
11 |
<div class="col-xs-1 col-md-1 col-lg-1"> |
12 |
<?= \chiliec\vote\widgets\Vote::widget([ |
13 |
'model' => $model, |
14 |
// optional fields
|
15 |
'showAggregateRating' => false, |
16 |
]);?> |
17 |
</div>
|
विषय सूचकांक एक ग्रिड प्रदर्शित करता है जो एक पंक्ति के रूप में _item.php दिखाता है। मैं एक रेटिंग प्रदर्शित नहीं करना चाहता था, केवल सकारात्मक वोट योग, इसलिए मैंने इसे झूठा कहा।
दृश्य ओवरराइड करने के लिए, मैंने /views/vote/vote.php बनाया है:
1 |
<div class="vote-row text-center" id="vote-<?=$modelId?>-<?=$targetId?>" data-placement="top" data-container="body" data-toggle="popover"> |
2 |
<span class="glyphicon glyphicon-chevron-up" onclick="vote(<?=$modelId?>, <?=$targetId?>, 'like'); return false;" style="cursor: pointer;"></span><br /><span id="vote-up-<?=$modelId?>-<?=$targetId?>"><?=$likes?></span> |
3 |
<div id="vote-response-<?=$modelId?>-<?=$targetId?>"> |
4 |
<?php if ($showAggregateRating) { ?> |
5 |
<?=Yii::t('vote', 'Aggregate rating')?>: <?=$rating?> |
6 |
<?php } ?> |
7 |
</div>
|
8 |
</div>
|
9 |
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> |
10 |
<meta itemprop="interactionCount" content="UserLikes:<?=$likes?>"/> |
11 |
<meta itemprop="interactionCount" content="UserDislikes:<?=$dislikes?>"/> |
12 |
<meta itemprop="ratingValue" content="<?=$rating?>"/> |
13 |
<meta itemprop="ratingCount" content="<?=$likes+$dislikes?>"/> |
14 |
<meta itemprop="bestRating" content="10"/> |
15 |
<meta itemprop="worstRating" content="0"/> |
16 |
</div>
|
बहुत सारे प्लगइन्स इतनी आसानी से ओवरराइड नहीं करते हैं।
मैंने वोट डाउन आइकन निकाल दिया और वोट अप आइकन को शेवरॉन में बदल दिया। यह अब जैसा दिखता है:
मुझे पता है कि यह कई परतों की तरह दिखती है, लेकिन वास्तव में यह काम करने के लिए बहुत लंबा नहीं लगा था।
डिस्कस टिप्पणियां जोड़ना
इसके बाद, मैंने आगामी साइट, ActiveTogether.org, के लिए एक डिस्कस साइट बनाई, जो आपके द्वारा इस सुविधा को पढ़ने के समय तक इन सुविधाओं को देखने के लिए उपलब्ध होगी। इस प्रकार, डिस्कस साइट शॉर्ट-नाम 'सक्रिय-एक साथ' है।
इससे पहले कि मैं कार्तिक के सामाजिक विस्तार (नीचे चर्चा की गई) को एकीकृत करने से पहले 2एमीगोस विजेट का उपयोग करना शुरू किया, जो भी डिस्कस टिप्पणियों की पेशकश करता है।
प्रत्येक टिप्पणी बोर्ड के लिए एक अद्वितीय पहचानकर्ता बनाना
जब भी कोई नया आइटम बनाया जाता है, तो Item::beforeSave() कार्रवाई डिस्कस के लिए एक अद्वितीय पहचानकर्ता भी टिप्पणी को लिंक करने के लिए बनाता है। आप किसी पृष्ठ के यूआरएल पर भरोसा भी कर सकते हैं, लेकिन यह सामान्यतः अधिक अनुमान लगाया जा सकता है।
दूसरे शब्दों में, डिस्कस प्रत्येक आइटम के लिए अलग से सभी टिप्पणियों को अलग करता है, और इससे प्रत्येक आइटम की टिप्पणी बोर्ड को मदद मिलती है।
1 |
public function beforeSave($insert) |
2 |
{
|
3 |
if (parent::beforeSave($insert)) { |
4 |
if ($insert) { |
5 |
$this->identifier = Yii::$app->security->generateRandomString(8); |
6 |
$this->site_id = Yii::$app->params['site']['id']; |
7 |
}
|
8 |
}
|
9 |
return true; |
10 |
}
|
टिप्पणियां प्रदर्शित करना
इसके बाद, टिप्पणी बोर्ड आसानी से आइटम दृश्य के नीचे प्रदर्शित होता है /active/views/Item.php में:
1 |
<?php
|
2 |
|
3 |
use yii\helpers\Html; |
4 |
use yii\helpers\HtmlPurifier; |
5 |
use yii\helpers\Url; |
6 |
use dosamigos\disqus\Comments; |
7 |
...
|
8 |
<?= Comments::widget([ |
9 |
'shortname' => 'active-together', |
10 |
'identifier'=>$model->identifier, |
11 |
]); ?> |
टिप्पणियों के लिए डिस्कस प्रदान करने के लिए विजेट को shortname और identifier की आवश्यकता है या नहीं।
यहां टिप्पणी बोर्ड की तरह दिखने वाला एक उदाहरण है:
सूचकांक दृश्य टिप्पणी टिप्पणी के साथ
2अमीगोस ने टिप्पणी की गणना दिखाने के लिए डिस्कस जावास्क्रिप्ट लाइब्रेरी का भी लाभ उठाया है। लेकिन ऐसा होने के लिए कुछ टुकड़े एक साथ रखे हैं।
सबसे पहले, मैंने एक आइटम की टिप्पणी की गिनती के लिए एक जेक्वेरी स्क्रिप्ट बनाया। जब पृष्ठ पर बहुत सारी वस्तुएं होती हैं, तो आपको इसे रीसेट के साथ अनुरोध करना reset: true;:
1 |
$(document).ready(function(){ |
2 |
DISQUSWIDGETS.getCount({reset: true}); |
3 |
});
|
फिर मैंने .js फ़ाइल को लोड करने के लिए TopicAsset.php फ़ाइल बनाई है:
1 |
<?php
|
2 |
namespace active\assets; |
3 |
use yii\web\AssetBundle; |
4 |
|
5 |
class TopicAsset extends AssetBundle |
6 |
{
|
7 |
public $basePath = '@webroot'; |
8 |
public $baseUrl = '@active'; |
9 |
public $css = [ |
10 |
|
11 |
];
|
12 |
public $js = [ |
13 |
'js/topic.js', |
14 |
];
|
15 |
public $depends = [ |
16 |
'yii\web\YiiAsset', |
17 |
'yii\bootstrap\BootstrapAsset', |
18 |
];
|
उसके बाद, /active/views/Topic.php फ़ाइल TopicAsset बंडल पंजीकृत करता है:
1 |
<?php
|
2 |
|
3 |
use yii\helpers\Html; |
4 |
use yii\grid\GridView; |
5 |
use yii\widgets\Breadcrumbs; |
6 |
use common\widgets\Alert; |
7 |
use active\assets\TopicAsset; |
8 |
TopicAsset::register($this); |
अगला, each_item.php आंशिक में एक टिप्पणी की संख्या शामिल है:
1 |
<p><?= $this->render('_social', ['model' => $model, |
2 |
'includeCommentCount'=>true]);?></p> |
और _social आंशिक प्रत्येक Item-> identifier का उपयोग करके इसे इस तरह दिखता है:
1 |
<li class="share_adjust_vert"><?= Html::a(Yii::t('active','Comments') |
2 |
,['/item/'.$model->slug.'#disqus_thread'], |
3 |
['data-disqus-identifier'=>$model->identifier]) ?> |
4 |
<?= CommentsCount::widget([ |
5 |
'shortname' => 'active-together', |
6 |
'identifier' => $model->identifier, |
7 |
]);
|
8 |
?>
|
डिस्कस के लिए टिप्पणी की गणना के साथ तत्वों को अपडेट करने का पता लगाने के लिए, प्रत्येक लिंक #disqus_thread के साथ समाप्त होना चाहिए।
वह पृष्ठ है जो उस पृष्ठ की तरह दिखता है। प्रत्येक आइटम में अपनी पहचानकर्ता को संदर्भित करके भरी हुई टिप्पणी की गिनती है:
चलिए उन सामाजिक साझाकरण बटनों पर चलते हैं जो आप देख रहे थे।
सामाजिक साझाकरण जोड़ना
कार्तिक ने अपने सामाजिक विजेट के साथ एक महान काम किया है जिसमें ट्विटर, डिस्कस और फेसबुक जैसी कई सामाजिक कंपनियों के संबंध में बुनियादी विन्यास का निर्माण किया गया है। अभी के लिए, मैं केवल फेसबुक शेयर बटन का उपयोग कर रहा हूं। ट्विटर शेयर बटन में बहुत अच्छा सौंदर्यशास्त्र नहीं है, इसलिए मैंने इसे एक HTML वेब ऐन्टेंट लिंक के साथ बदल दिया।
/active / views /topic/_social.php में टिप्पणियों की गिनती के बगल में बटनों की जोड़ी के लिए मेरा कोड है:
1 |
</li>
|
2 |
<li class="share_adjust_vert"><a class="twitter-share" |
3 |
href="https://twitter.com/intent/tweet? |
4 |
text=<?= urlencode($model->title); ?> |
5 |
&url=<?= urlencode(Url::canonical());?> |
6 |
&via=<?= Yii::$app->params['site']['twitter_account']?> |
7 |
"><img src="<?= Url::to(Url::home(true).'/images/social/twitter_icon.png'); |
8 |
?>"> Tweet</a></li> |
9 |
<li><?= FacebookPlugin::widget |
10 |
(['type'=>FacebookPlugin::SHARE, |
11 |
'settings' => ['dataSize'=>'small', |
12 |
'class'=>"fb_iframe_widget"]]); ?></li> |
13 |
</ul>
|
सरल लगता है, सिवाय इसके कि खड़ी संरेखित फेसबुक के विजेट को कुछ सीएसएस समायोजन की आवश्यकता है। /active/views/topic/_grid.php में, मैंने यह समायोजन रखा है:
1 |
<style media="screen" type="text/css"> |
2 |
.fb_iframe_widget span |
3 |
{
|
4 |
vertical-align: baseline !important; |
5 |
}
|
6 |
</style>
|
इसे अन्य सीएसएस फ़ाइलों के लोड होने के बाद आना होगा।
और, site.css फ़ाइल में, मैंने इसे मैं सटीक रूप से देखने के लिए रखा था:
1 |
.share_adjust_vert {
|
2 |
margin-top:-1px; |
3 |
font-size:90%; |
4 |
vertical-align: top; |
5 |
} |
रैपिंग अप
ईमानदारी से, मैं इतनी उत्साहित हूं कि ये कितनी आसानी से यी का उपयोग करना था और मूल रूप से एक मिनी सामाजिक क्लोन बनाना।ये महान फ्रेमवर्क के लिए महान प्लग-इन हैं, और आम तौर पर यी(Yii) के डेवलपर्स और प्लगइन डेवलपर्स के इसके समुदाय डेवलपर्स के सवाल और मुद्दों के साथ GitHub पर प्रतिक्रियाशील हैं।
मुझे आशा है कि आप ActiveTogether को देखने के लिए उत्सुक हैं और अपने लिए यह रूपरेखा देखेंगे।
यदि आपके पास कोई प्रश्न या सुझाव हैं, तो कृपया उन्हें टिप्पणियों में पोस्ट करें। अगर आप मेरे भविष्य के एन्वाटो ट्यूट्स+ ट्यूटोरियल और अन्य सीरीज पर बने रहना चाहते हैं, तो कृपया मेरे प्रशिक्षक पृष्ठ पर जाएं या @lookahead_io का पालन करें। निश्चित रूप से मेरी स्टार्टअप श्रृंखला और मीटिंग प्लानर देखें।
सम्बंधित लिंक्स
