ساخت صفحه درباره من

ساخت صفحه درباره من

در این آموزش ما قصد داریم تا به شما نحوه ساخت پلاگین در مورد من را بدهیم که یکی از پلاگین ها کاربردی در فضای مجازی است.این پلاگین دارای مزیت های بسیار زیادی است که در ادامه بیشتر با آنها آشنا خواهید شد.

برای مشاهده لینک وارد شود

خوب مثل همیشه کار را با نوشتن کد های HTML آغاز می کنیم.صفحه درباره من یک صفحه ساده است که شامل جزئیات نحوه ی تماس با شخص و بعضی اطلاعات اضافی در باره شخص است.ما برای این کار نیاز به اضافه کرده متاتگ های مناسب و استفاده از hCard microformat برای جاسازی اطلاعات در صفحه هستیم.

index.php

​<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Online info page of 
         <?php echo $profile->fullName()?>. Learn more about me and download a vCard." />
        <title>Creating a PHP and CSS Powered About Page  | 8np Demo</title>
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <section id="infoPage">

    		<img src="<?php echo $profile->photoURL()?>" 
                alt="<?php echo $profile->fullName()?>" width="164" height="164" />
            <header>
                <h1><?php echo $profile->fullName()?></h1>
                <h2><?php echo $profile->tags()?></h2>
            </header>

            <p class="description"><?php echo nl2br($profile->description())?></p>

            <a href="<?php echo $profile->facebook()?>" class="grayButton facebook">
                 Find me on Facebook</a>
            <a href="<?php echo $profile->twitter()?>" class="grayButton twitter">
              Follow me on Twitter</a>
            <ul class="vcard">
                <li class="fn"><?php echo $profile->fullName()?></li>
                <li class="org"><?php echo $profile->company()?></li>
                <li class="tel"><?php echo $profile->cellphone()?></li>
                <li><a class="url" href="<?php echo $profile->website()?>">
                <?php echo $profile->website()?></a></li>
            </ul>
        </section>
        <section id="links">
        	<a href="?vcard" class="vcard">Download as V-Card</a>
            <a href="?json" class="json">Get as a JSON feed</a>
            <p>In this tutorial: <a href="http://www.flickr.com/photos/levycarneiro/4144428707/">
              Self Portrait</a> by <a href="http://www.flickr.com/photos/levycarneiro/">
                       Levy Carneiro Jr</a></p>
        </section>
    </body>
</html>

همچنین شما میتونید آدرس منزل یا محل کار یا هر اطلاعات دیگری را که بخواهید در این صفحه وارد کنید.

php-css3-html5-about-page

در صفحه درباره من  ما یک فایل پیکربندی ساده داریم که اطلاعات مرود استفاده صفحه را نگه میدارد.این همان منبعی است که فایل vCard  و فید JSON از آن استفاده می کنند.

config.php

$info = array(
    'firstName'		=> 'John',
    'middleName'	=> 'S.',
    'lastName'		=> 'Smith',
    'photoURL'		=> 'assets/img/photo.jpg',
    'birthDay'		=> strtotime('22-03-1983'),
    'city'		=> 'MyCity',
    'country'		=> 'United States',
    'street'		=> 'My Street 21',
    'zip'		=> '12345',
    'company'		=> 'Google Inc',
    'website'		=> 'http://tutorialzine.com/',
    'email'		=> 'email@example.com',
    'cellphone'		=> '12345678910',
    'description'	=> "I am a webdeveloper living in ...",
    'tags'		=> 'Developer, Designer, Photographer',
    'facebook'		=> 'http://www.facebook.com/',
    'twitter'		=> 'http://twitter.com/Tutorialzine'
);

اینها تمام خصوصیات صفحه درباره من نیست.بعضی از مشخصات زمانی قابل دسترسی خواهند بود که کاربر پروفایل را به صورت vCars یا فایل JSON دانلود کند.شما میتونید فیلد های بیشتری نیز به این آرایه اضافه کنید.پس ما اطلاعاتی را که میخواهیم خصوصی کنیم باید یک کلاسی تعریف کنیم تا این کار را برای ما انجام دهد.

aboutPage.class.php

class AboutPage{
    private $info = array();

    // The constructor:

    public function __construct(array $info){
        $this->info = $info;
    }

    // A helper method that assembles the person's full name:

    public function fullName(){
        return $this->firstName().' '.$this->middleName().' '.$this->lastName();
    }

    // Using PHP's Magick __call method to make the
    // properties of $this->info available as method calls:

    public function __call($method,$args = array()){

        if(!array_key_exists($method,$this->info)){
            throw new Exception('Such a method does not exist!');
        }

        if(!empty($args)){
            $this->info[$method] = $args[0];
        }
        else{
            return $this->info[$method];
        }
    }

    // This method generates a vcard from the $info
    // array, using the third party vCard class:

    public function downloadVcard(){

        $vcard = new vCard;

        $methodCalls = array();

        // Translating the properties of $info to method calls
        // understandable by the third party vCard class:

        $propertyMap = array(
            'firstName'		=> 'setFirstName',
            'middleName'	=> 'setMiddleName',
            'lastName'		=> 'setLastName',
            'birthDay'		=> 'setBirthday',
            'city'			=> 'setHomeCity',
            'zip'			=> 'setHomeZIP',
            'country'		=> 'setHomeCountry',
            'website'		=> 'setURLWork',
            'email'			=> 'setEMail',
            'description'	=> 'setNote',
            'cellphone'		=> 'setCellphone');

        // Looping though the properties in $info:

        foreach($this->info as $k=>$v){

            // Mapping a property of the array to a recognized method:

            if($propertyMap[$k]){
                $methodCalls[$propertyMap[$k]] = $v;
            }
            else {

                // If it does not exist, transform it to setPropertyName,
                // which might be recognized by the vCard class:

                $methodCalls['set'.ucfirst($k)] = $v;
            }
        }

        // Attempt to call these methods:

        foreach($methodCalls as $k=>$v){
            if(method_exists($vcard,$k)){
                $vcard->$k($v);
            }
            else error_log('Invalid property in your $info array: '.$k);
        }

        // Serving the vcard with a x-vcard Mime type:

        header('Content-Type: text/x-vcard; charset=utf-8');
        header('Content-Disposition: attachment; filename="'.$this->fullName().'.vcf"');
        echo $vcard->generateCardOutput();
    }

    // This method generates and serves a JSON object from the data:

    public function generateJSON(){
        header('Content-Type: application/json');
        header('Content-Disposition: attachment; filename="'.$this->fullName().'.json"');

        // If you wish to allow cross-domain AJAX requests, uncomment the following line:
        // header('Access-Control-Allow-Origin: *');

        echo json_encode($this->info);
    }
}

همانطور که در کد زیر مشاهده می کنید ما از سه کلاس opensource برای کارت ویزیت استفاده کردیم.

ما از متد generateJSON برای انجام کار های اساسی استفاده می کنیم.در زیر شما نحوه استفاده از کلاس ()json_encode را مشاهده می کنید.

require 'includes/config.php';
require 'includes/aboutPage.class.php';
require 'includes/vcard.class.php';

$profile = new AboutPage($info);

if(array_key_exists('json',$_GET)){
    $profile->generateJSON();
    exit;
}
else if(array_key_exists('vcard',$_GET)){
    $profile->downloadVcard();
    exit;
}

و در آخر شما کد های CSS  را مشاهده میکنید که برای زیبایی بخشیدن هر چه بیشتر به صفحه از آن ها استفاده می کنیم.

assets/css/styles.css

a.grayButton{
    padding:6px 12px 6px 30px;
    position:relative;

    background-color:#fcfcfc;
    background:-moz-linear-gradient(left top -90deg, #fff, #ccc);
    background:-webkit-linear-gradient(left top -90deg, #fff, #ccc);
    background:linear-gradient(left top -90deg, #fff, #ccc);

    -moz-box-shadow: 1px 1px 1px #333;
    -webkit-box-shadow: 1px 1px 1px #333;
    box-shadow: 1px 1px 1px #333;

    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;

    font-size:11px;
    color:#444;
    text-shadow:1px 1px 0 #fff;
    display:inline-block;
    margin-right:10px;

    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    transition:0.25s;
}

a.grayButton:hover{
    text-decoration:none !important;
    box-shadow:0 0 5px #2b99ff;
}

a.grayButton:before{
    background:url('../img/icons.png') no-repeat;
    height: 18px;
    left: 4px;
    position: absolute;
    top: 6px;
    width: 20px;
    content: '';
}

a.grayButton.twitter:before{
    background-position:0 -20px;
}

ودر زیر ما برای دکمه دانلود vCard  و فایل JSON کد های CSS زیر را مینویسیم

assets/css/styles.css

#links{
    text-align:center;
    padding-top: 20px;
    border-top:1px solid #4a4a4a;
    text-shadow: 1px 1px 0 #333333;
    width:655px;
    margin:0 auto;
}

#links a{
    color: #ccc;
    position:relative;
}

#links > a{
    display: inline-block;
    font-size: 11px;
    margin: 0 10px;
    padding-left:15px;
}

#links > a:before{
    background: url("../img/icons.png") no-repeat -10px -60px;
    position:absolute;
    content:'';
    width:16px;
    height:16px;
    top:2px;
    left:-4px;
}

#links > a.vcard:before{
    background-position: -10px -40px;
    top: 0;
    left: -8px;
}

#links p{
    color: #888888;
    font-size: 10px;
    font-style: normal;
    padding: 30px;
}

پایان

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× 8 = هشت

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>