How to create Pinterest-like script – step 3 I hope you’re looking forward to a new lesson. For today I prepared few important changes. For the first – this is a new login and registration system for our script, the second – since today we are going to use database to keep information about members, photos, and for future comments. Now, you need to log in to be able to upload photos. Today I’ll publish all updated files of our script, in case if you want to investigate everything at your local computer – you always can download full package with sources.
如何创建类似Pinterest的脚本–步骤3我希望您期待新的课程。 今天，我准备了一些重要的更改。 首先，这是一个新的脚本登录和注册系统，其次，从今天开始，我们将使用数据库来保存有关成员，照片和将来的评论的信息。 现在，您需要登录才能上传照片。 今天，我将发布脚本的所有更新文件，以防万一您想在本地计算机上调查所有内容–您始终可以下载带有源代码的完整软件包。
Now you can check our demo and download the sources here:
现在，您可以查看我们的演示并在此处下载资源：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
步骤1. SQL (Step 1. SQL)
To better understand how it works – let’s look at all the new database tables:
为了更好地理解它的工作原理，我们来看一下所有新的数据库表：
CREATE TABLE `pd_profiles` (
`id` int(10) unsigned NOT NULL auto_increment,
`first_name` varchar(255) NOT NULL default '',
`last_name` varchar(255) NOT NULL default '',
`email` varchar(255) NOT NULL default '',
`password` varchar(40) NOT NULL default '',
`salt` varchar(10) NOT NULL default '',
`status` enum('active','passive') NOT NULL default 'active',
`role` tinyint(4) unsigned NOT NULL default '1',
`date_reg` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `pd_profiles` (`first_name`, `last_name`, `email`, `password`, `salt`, `status`, `role`, `date_reg`) VALUES
('test user first name', 'test user last name', 'user@user.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 1, NOW()),
('moderator first name', 'moderator last name', 'moderator@moderator.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 2, NOW()),
('admin first name', 'admin last name', 'admin@admin.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 3, NOW()),
('test user 2 first name', 'test user 2 last name', 'user2@user.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 1, NOW());
CREATE TABLE IF NOT EXISTS `pd_photos` (
`id` int(10) unsigned NOT NULL auto_increment,
`title` varchar(255) default '',
`filename` varchar(255) default '',
`owner` int(11) NOT NULL,
`when` int(11) NOT NULL default '0',
`comments_count` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `pd_photos` (`title`, `filename`, `owner`, `when`) VALUES
('Item #1', 'pic1.jpg', 1, UNIX_TIMESTAMP()),
('Item #2', 'pic2.jpg', 2, UNIX_TIMESTAMP()+1),
('Item #3', 'pic3.jpg', 3, UNIX_TIMESTAMP()+2),
('Item #4', 'pic4.jpg', 4, UNIX_TIMESTAMP()+3);
CREATE TABLE IF NOT EXISTS `pd_items_cmts` (
`c_id` int(11) NOT NULL AUTO_INCREMENT ,
`c_item_id` int(12) NOT NULL default '0',
`c_ip` varchar(20) default NULL,
`c_name` varchar(64) default '',
`c_text` text NOT NULL ,
`c_when` int(11) NOT NULL default '0',
PRIMARY KEY (`c_id`),
KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;
CREATE TABLE `pd_profiles` (
`id` int(10) unsigned NOT NULL auto_increment,
`first_name` varchar(255) NOT NULL default '',
`last_name` varchar(255) NOT NULL default '',
`email` varchar(255) NOT NULL default '',
`password` varchar(40) NOT NULL default '',
`salt` varchar(10) NOT NULL default '',
`status` enum('active','passive') NOT NULL default 'active',
`role` tinyint(4) unsigned NOT NULL default '1',
`date_reg` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `pd_profiles` (`first_name`, `last_name`, `email`, `password`, `salt`, `status`, `role`, `date_reg`) VALUES
('test user first name', 'test user last name', 'user@user.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 1, NOW()),
('moderator first name', 'moderator last name', 'moderator@moderator.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 2, NOW()),
('admin first name', 'admin last name', 'admin@admin.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 3, NOW()),
('test user 2 first name', 'test user 2 last name', 'user2@user.com', 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'testing', 'active', 1, NOW());
CREATE TABLE IF NOT EXISTS `pd_photos` (
`id` int(10) unsigned NOT NULL auto_increment,
`title` varchar(255) default '',
`filename` varchar(255) default '',
`owner` int(11) NOT NULL,
`when` int(11) NOT NULL default '0',
`comments_count` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `pd_photos` (`title`, `filename`, `owner`, `when`) VALUES
('Item #1', 'pic1.jpg', 1, UNIX_TIMESTAMP()),
('Item #2', 'pic2.jpg', 2, UNIX_TIMESTAMP()+1),
('Item #3', 'pic3.jpg', 3, UNIX_TIMESTAMP()+2),
('Item #4', 'pic4.jpg', 4, UNIX_TIMESTAMP()+3);
CREATE TABLE IF NOT EXISTS `pd_items_cmts` (
`c_id` int(11) NOT NULL AUTO_INCREMENT ,
`c_item_id` int(12) NOT NULL default '0',
`c_ip` varchar(20) default NULL,
`c_name` varchar(64) default '',
`c_text` text NOT NULL ,
`c_when` int(11) NOT NULL default '0',
PRIMARY KEY (`c_id`),
KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;
There are three tables, the first one (pd_profiles) keeps information about members, the second one (pd_photos) keep info about all photos, and the third one is for comments. Please pay attention, that all members have the same password: ‘password’. You have to use email and password to login into system.
一共有三个表格，第一个(pd_profiles)保存有关成员的信息，第二个(pd_photos)保存有关所有照片的信息，第三个用于评论。 请注意，所有成员都使用相同的密码：“ password”。 您必须使用电子邮件和密码登录系统。
步骤2. HTML (Step 2. HTML)
I made small corrections in our ‘index.html’ template file. As you know, we don’t have to display upload form for usual visitors, it is only for logged in members. But, we have to display login and join forms for visitors. Please look at updated html markup of our index page:
我在“ index.html”模板文件中做了一些小的更正。 如您所知，我们不必为普通访问者显示上传表单，仅针对已登录的成员。 但是，我们必须为访问者显示登录和加入表单。 请查看我们索引页面的更新的html标记：
templates / index.html (templates/index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>How to create Pinterest-like script - step 3 | Script Tutorials</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- header panel -->
<div class="header_panel">
<!-- logo -->
<a href="#" class="logo"></a>
<!-- search form -->
<form action="" method="get" class="search">
<input autocomplete="off" name="q" size="27" placeholder="Search" type="text" />
<input name="search" type="submit" />
</form>
<!-- navigation menu -->
<ul class="nav">
<li>
<a href="#">About<span></span></a>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Pin It Button</a></li>
<li><a href="#" target="_blank">For Businesses</a></li>
<li class="div"><a href="#">Careers</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li class="div"><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Copyright</a></li>
<li><a href="#">Trademark</a></li>
</ul>
</li>
{menu_elements}
<li>
<a href="https://www.script-tutorials.com/pinterest-like-script-step-3/">Back to tutorial</a>
</li>
</ul>
</div>
{extra_data}
<!-- main container -->
<div class="main_container">
{images_set}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>How to create Pinterest-like script - step 3 | Script Tutorials</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- header panel -->
<div class="header_panel">
<!-- logo -->
<a href="#" class="logo"></a>
<!-- search form -->
<form action="" method="get" class="search">
<input autocomplete="off" name="q" size="27" placeholder="Search" type="text" />
<input name="search" type="submit" />
</form>
<!-- navigation menu -->
<ul class="nav">
<li>
<a href="#">About<span></span></a>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Pin It Button</a></li>
<li><a href="#" target="_blank">For Businesses</a></li>
<li class="div"><a href="#">Careers</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li class="div"><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Copyright</a></li>
<li><a href="#">Trademark</a></li>
</ul>
</li>
{menu_elements}
<li>
<a href="https://www.script-tutorials.com/pinterest-like-script-step-3/">Back to tutorial</a>
</li>
</ul>
</div>
{extra_data}
<!-- main container -->
<div class="main_container">
{images_set}
</div>
</body>
</html>
As you see – I added two new template keys: {menu_elements} – this keys will contain extra join and login forms for visitors, and Upload, Profile and Logout menu elements for logged-in members. Our new key {extra_data} contains join and login forms for visitors, and upload form for members. All these forms – pure CSS-driven forms.
如您所见-我添加了两个新的模板键：{menu_elements}-该键将包含用于访客的额外联接和登录表单，以及用于已登录成员的Upload，Profile和Logout菜单元素。 我们的新键{extra_data}包含访问者的加入和登录表单，以及成员的上载表单。 所有这些形式–纯CSS驱动的形式。
步骤3. PHP (Step 3. PHP)
As you might imagine – all our php files were modified. Let’s start with main index file:
如您所料–我们所有的php文件都已修改。 让我们从主索引文件开始：
index.php (index.php)
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
// get login data
list ($sLoginMenu, $sExtra) = $GLOBALS['CMembers']->getLoginData();
// get all photos
$sPhotos = $GLOBALS['CPhotos']->getAllPhotos();
// draw common page
$aKeys = array(
'{menu_elements}' => $sLoginMenu,
'{extra_data}' => $sExtra,
'{images_set}' => $sPhotos
);
echo strtr(file_get_contents('templates/index.html'), $aKeys);
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
// get login data
list ($sLoginMenu, $sExtra) = $GLOBALS['CMembers']->getLoginData();
// get all photos
$sPhotos = $GLOBALS['CPhotos']->getAllPhotos();
// draw common page
$aKeys = array(
'{menu_elements}' => $sLoginMenu,
'{extra_data}' => $sExtra,
'{images_set}' => $sPhotos
);
echo strtr(file_get_contents('templates/index.html'), $aKeys);
As you see – it is much smaller now. But in the same time you can see that I added three new classes: CMySQL (to work with database), CMembers (to work with members) and CPhotos (to work with photos). Well, this file displays Login and Join forms for visitors and Upload form for active members. Also, we display all photos at this page. The second updated file is:
如您所见–现在它要小得多。 但是在同一时间，您可以看到我添加了三个新类：CMySQL(用于数据库)，CMembers(用于成员)和CPhotos(用于照片)。 好吧，此文件为访问者显示“登录”和“加入”表单，为活动成员显示“上传”表单。 另外，我们在此页面上显示所有照片。 第二个更新的文件是：
service.php (service.php)
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
if (! isset($_SESSION['member_id']) && $_POST['Join'] == 'Join') {
$GLOBALS['CMembers']->registerProfile();
}
$i = (int)$_GET['id'];
if (! $i) { // if something is wrong - relocate to error page
header('Location: error.php');
exit;
}
$aPhotoInfo = $GLOBALS['CPhotos']->getPhotoInfo($i);
$aOwnerInfo = $GLOBALS['CMembers']->getProfileInfo($aPhotoInfo['owner']);
$sOwnerName = ($aOwnerInfo['first_name']) ? $aOwnerInfo['first_name'] : $aOwnerInfo['email'];
$sPhotoTitle = $aPhotoInfo['title'];
$sPhotoDate = $GLOBALS['CPhotos']->formatTime($aPhotoInfo['when']);
$sFolder = 'photos/';
$sFullImgPath = $sFolder . 'f_' . $aPhotoInfo['filename'];
?>
<div class="pin bigpin">
<div class="owner">
<a href="#" class="button follow_button">Follow</a>
<a target="_blank" class="owner_img" href="#">
<img alt="<?= $sOwnerName ?>" src="images/avatar.jpg" />
</a>
<p class="owner_name"><a target="_blank" href="#"><?= $sOwnerName ?></a></p>
<p class="owner_when">Uploaded on <?= $sPhotoDate ?></p>
</div>
<div class="holder">
<div class="actions">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
</div>
<a class="image" href="#" title="<?= $sPhotoTitle ?>">
<img alt="<?= $sPhotoTitle ?>" src="<?= $sFullImgPath ?>">
</a>
</div>
<p class="desc"><?= $sPhotoTitle ?></p>
<div class="comments"></div>
<form class="comment" method="post" action="#">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
if (! isset($_SESSION['member_id']) && $_POST['Join'] == 'Join') {
$GLOBALS['CMembers']->registerProfile();
}
$i = (int)$_GET['id'];
if (! $i) { // if something is wrong - relocate to error page
header('Location: error.php');
exit;
}
$aPhotoInfo = $GLOBALS['CPhotos']->getPhotoInfo($i);
$aOwnerInfo = $GLOBALS['CMembers']->getProfileInfo($aPhotoInfo['owner']);
$sOwnerName = ($aOwnerInfo['first_name']) ? $aOwnerInfo['first_name'] : $aOwnerInfo['email'];
$sPhotoTitle = $aPhotoInfo['title'];
$sPhotoDate = $GLOBALS['CPhotos']->formatTime($aPhotoInfo['when']);
$sFolder = 'photos/';
$sFullImgPath = $sFolder . 'f_' . $aPhotoInfo['filename'];
?>
<div class="pin bigpin">
<div class="owner">
<a href="#" class="button follow_button">Follow</a>
<a target="_blank" class="owner_img" href="#">
<img alt="<?= $sOwnerName ?>" src="images/avatar.jpg" />
</a>
<p class="owner_name"><a target="_blank" href="#"><?= $sOwnerName ?></a></p>
<p class="owner_when">Uploaded on <?= $sPhotoDate ?></p>
</div>
<div class="holder">
<div class="actions">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
</div>
<a class="image" href="#" title="<?= $sPhotoTitle ?>">
<img alt="<?= $sPhotoTitle ?>" src="<?= $sFullImgPath ?>">
</a>
</div>
<p class="desc"><?= $sPhotoTitle ?></p>
<div class="comments"></div>
<form class="comment" method="post" action="#">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>
I just added an user registration. In addition, we do not need to pass the full name of the file to see larger version. Instead, we pass the image ID. The next updated file is uploader:
我刚刚添加了一个用户注册。 此外，我们无需传递文件的全名即可查看较大版本。 相反，我们传递图像ID。 下一个更新的文件是上载器：
upload.php (upload.php)
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
function uploadImageFile() { // Note: GD library is required for this upload function
$iDefWidth = 192; // default photos width (in case of resize)
$iFDefWidth = 556; // full default photos width (in case of resize)
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = $iFDefWidth; // desired image dimensions
$iJpgQuality = 75;
if ($_FILES) {
// if there are no errors and filesize less than 400kb
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 400 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name'])) {
// new unique filename
$sTempFileName = 'photos/' . md5(time().rand());
// move uploaded file into cache folder
move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName);
// change file permission to 644
@chmod($sTempFileName, 0644);
// if temp file exists
if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
$aSize = getimagesize($sTempFileName); // obtain image info
if (!$aSize) {
@unlink($sTempFileName);
return;
}
// check for image type and create a new image from file
switch($aSize[2]) {
case IMAGETYPE_JPEG:
$sExt = '.jpg';
$vImg = @imagecreatefromjpeg($sTempFileName);
break;
case IMAGETYPE_PNG:
$sExt = '.png';
$vImg = @imagecreatefrompng($sTempFileName);
break;
default:
@unlink($sTempFileName);
return;
}
// get source image width and height
$iSrcWidth = imagesx($vImg);
$iSrcHeight = imagesy($vImg);
// recalculate height (depends on width)
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;
// create a new true color image
$vDstImg = @imagecreatetruecolor($iWidth, $iHeight);
// copy and resize
imagecopyresampled($vDstImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);
// add a blank image object into DB
$iLastId = $GLOBALS['CPhotos']->insertBlankPhoto($_FILES['image_file']['name'], $_SESSION['member_id']);
// define a result image filename
$sResultFileName = 'photos/f_pic' . $iLastId . $sExt;
// update filename for our object
$GLOBALS['CPhotos']->updateFilename($iLastId, 'pic' . $iLastId . $sExt);
// output image to file and set permission 644
imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
@chmod($sResultFileName, 0644);
// and, prepare a thumbnail as well
$iWidth = $iDefWidth;
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;
$vDstThImg = @imagecreatetruecolor($iWidth, $iHeight);
imagecopyresampled($vDstThImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);
$sResultThumnName = 'photos/pic' . $iLastId . $sExt;
imagejpeg($vDstThImg, $sResultThumnName, $iJpgQuality);
@chmod($sResultThumnName, 0644);
// unlink temp file
@unlink($sTempFileName);
return $sResultFileName;
}
}
}
}
}
}
// upload available only for logged in members
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
$sImage = uploadImageFile();
echo '1';
}
// set warning level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
require_once('classes/CPhotos.php');
function uploadImageFile() { // Note: GD library is required for this upload function
$iDefWidth = 192; // default photos width (in case of resize)
$iFDefWidth = 556; // full default photos width (in case of resize)
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iWidth = $iHeight = $iFDefWidth; // desired image dimensions
$iJpgQuality = 75;
if ($_FILES) {
// if there are no errors and filesize less than 400kb
if (! $_FILES['image_file']['error'] && $_FILES['image_file']['size'] < 400 * 1024) {
if (is_uploaded_file($_FILES['image_file']['tmp_name'])) {
// new unique filename
$sTempFileName = 'photos/' . md5(time().rand());
// move uploaded file into cache folder
move_uploaded_file($_FILES['image_file']['tmp_name'], $sTempFileName);
// change file permission to 644
@chmod($sTempFileName, 0644);
// if temp file exists
if (file_exists($sTempFileName) && filesize($sTempFileName) > 0) {
$aSize = getimagesize($sTempFileName); // obtain image info
if (!$aSize) {
@unlink($sTempFileName);
return;
}
// check for image type and create a new image from file
switch($aSize[2]) {
case IMAGETYPE_JPEG:
$sExt = '.jpg';
$vImg = @imagecreatefromjpeg($sTempFileName);
break;
case IMAGETYPE_PNG:
$sExt = '.png';
$vImg = @imagecreatefrompng($sTempFileName);
break;
default:
@unlink($sTempFileName);
return;
}
// get source image width and height
$iSrcWidth = imagesx($vImg);
$iSrcHeight = imagesy($vImg);
// recalculate height (depends on width)
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;
// create a new true color image
$vDstImg = @imagecreatetruecolor($iWidth, $iHeight);
// copy and resize
imagecopyresampled($vDstImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);
// add a blank image object into DB
$iLastId = $GLOBALS['CPhotos']->insertBlankPhoto($_FILES['image_file']['name'], $_SESSION['member_id']);
// define a result image filename
$sResultFileName = 'photos/f_pic' . $iLastId . $sExt;
// update filename for our object
$GLOBALS['CPhotos']->updateFilename($iLastId, 'pic' . $iLastId . $sExt);
// output image to file and set permission 644
imagejpeg($vDstImg, $sResultFileName, $iJpgQuality);
@chmod($sResultFileName, 0644);
// and, prepare a thumbnail as well
$iWidth = $iDefWidth;
$iHeight = $iSrcHeight * $iWidth / $iSrcWidth;
$vDstThImg = @imagecreatetruecolor($iWidth, $iHeight);
imagecopyresampled($vDstThImg, $vImg, 0, 0, 0, 0, $iWidth, $iHeight, $iSrcWidth, $iSrcHeight);
$sResultThumnName = 'photos/pic' . $iLastId . $sExt;
imagejpeg($vDstThImg, $sResultThumnName, $iJpgQuality);
@chmod($sResultThumnName, 0644);
// unlink temp file
@unlink($sTempFileName);
return $sResultFileName;
}
}
}
}
}
}
// upload available only for logged in members
if ($_SESSION['member_id'] && $_SESSION['member_status'] == 'active' && $_SESSION['member_role']) {
$sImage = uploadImageFile();
echo '1';
}
Now, only logged members can upload photos (as I told in the beginning). Well, I think that now it is important to review all our new classes as well:
现在，只有登录的会员才能上传照片(正如我在开头所述)。 好吧，我认为现在同样重要的是复习我们所有的新课程：
classes / CMembers.php (classes/CMembers.php)
/*
* Members class
*/
class CMembers {
// constructor
function CMembers() {
session_start();
}
// get login box function
function getLoginData() {
if (isset($_GET['logout'])) { // logout process
if (isset($_SESSION['member_email']) && isset($_SESSION['member_pass']))
$this->performLogout();
}
if ($_POST && $_POST['email'] && $_POST['password']) { // login process
if ($this->checkLogin($_POST['email'], $_POST['password'], false)) { // successful login
$this->performLogin($_POST['email'], $_POST['password']);
header('Location: index.php');
exit;
}
} else { // in case if we are already logged in
if (isset($_SESSION['member_email']) && $_SESSION['member_email'] && $_SESSION['member_pass']) {
$aReplaces = array(
'{name}' => $_SESSION['member_email'],
'{status}' => $_SESSION['member_status'],
'{role}' => $_SESSION['member_role'],
);
// display Profiles menu and Logout
$sLoginMenu = <<<EOF
<li><a href="#add_form" id="add_pop">Add +</a></li>
<li>
<a href="#">Profile<span></span></a>
<ul>
<li><a href="#">Invite Friends</a></li>
<li><a href="#">Find Friends</a></li>
<li class="div"><a href="#">Boards</a></li>
<li><a href="#">Pins</a></li>
<li><a href="#">Likes</a></li>
<li class="div"><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li><a href="index.php?logout">Logout</a></li>
EOF;
$sExtra = <<<EOF
<!-- upload form -->
<a href="#x" class="overlay" id="add_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Upload a Pin</h2>
</div>
<form id="upload_form">
<input type="file" name="image_file" id="image_file" onchange="" />
</form>
<div id="upload_result"></div>
</div>
EOF;
return array($sLoginMenu, $sExtra);
}
}
// display Join and Login menu buttons
$sLoginMenu = <<<EOF
<li><a href="#join_form" id="join_pop">Join</a></li>
<li><a href="#login_form" id="login_pop">Login</a></li>
EOF;
$sExtra = <<<EOF
<!-- join form -->
<a href="#x" class="overlay2" id="join_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Create your account</h2>
</div>
<form method="POST" action="service.php">
<ul class="ctrl_grp">
<li>
<input type="text" name="email" />
<label>Email Address</label>
<span class="fff"></span>
</li>
<li>
<input type="password" name="password" />
<label>Password</label>
<span class="fff"></span>
</li>
<li>
<input type="text" name="first_name" />
<label>First Name</label>
<span class="fff"></span>
</li>
<li>
<input type="text" name="last_name" />
<label>Last Name</label>
<span class="fff"></span>
</li>
</ul>
<div>
<input type="hidden" name="Join" value="Join" />
<button class="submit_button" type="submit">Create Account</button>
</div>
</form>
</div>
<!-- login form -->
<a href="#x" class="overlay3" id="login_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Login</h2>
</div>
<form method="POST" action="index.php">
<ul class="ctrl_grp">
<li>
<input type="text" name="email" id="id_email">
<label>Email</label>
<span class="fff"></span>
</li>
<li>
<input type="password" name="password" id="id_password">
<label>Password</label>
<span class="fff"></span>
</li>
</ul>
<div>
<button class="submit_button" type="submit">Login</button>
</div>
</form>
</div>
EOF;
return array($sLoginMenu, $sExtra);
}
// perform login
function performLogin($sEmail, $sPass) {
$this->performLogout();
// make variables safe
$sEmail = $GLOBALS['MySQL']->escape($sEmail);
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
// $sPassEn = $aProfile['password'];
$iPid = $aProfile['id'];
$sSalt = $aProfile['salt'];
$sStatus = $aProfile['status'];
$sRole = $aProfile['role'];
$sPass = sha1(md5($sPass) . $sSalt);
$_SESSION['member_id'] = $iPid;
$_SESSION['member_email'] = $sEmail;
$_SESSION['member_pass'] = $sPass;
$_SESSION['member_status'] = $sStatus;
$_SESSION['member_role'] = $sRole;
}
// perform logout
function performLogout() {
unset($_SESSION['member_id']);
unset($_SESSION['member_email']);
unset($_SESSION['member_pass']);
unset($_SESSION['member_status']);
unset($_SESSION['member_role']);
}
// check login
function checkLogin($sEmail, $sPass, $isHash = true) {
// escape variables to make them self
$sEmail = $GLOBALS['MySQL']->escape($sEmail);
$sPass = $GLOBALS['MySQL']->escape($sPass);
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
$sPassEn = $aProfile['password'];
if ($sEmail && $sPass && $sPassEn) {
if (! $isHash) {
$sSalt = $aProfile['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
}
return ($sPass == $sPassEn);
}
return false;
}
// profile registration
function registerProfile() {
$sFirstname = $GLOBALS['MySQL']->escape($_POST['first_name']);
$sLastname = $GLOBALS['MySQL']->escape($_POST['last_name']);
$sEmail = $GLOBALS['MySQL']->escape($_POST['email']);
$sPassword = $GLOBALS['MySQL']->escape($_POST['password']);
if ($sEmail && $sPassword) {
// check if email is already exists
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
if ($aProfile['id'] > 0) {
// relocate to 'error' page
header('Location: error.php');
} else {
// generate Salt and Cached password
$sSalt = $this->getRandSaltCode();
$sPass = sha1(md5($sPassword) . $sSalt);
// add new member into database
$sSQL = "
INSERT INTO `pd_profiles` SET
`first_name` = '{$sFirstname}',
`last_name` = '{$sLastname}',
`email` = '{$sEmail}',
`password` = '{$sPass}',
`salt` = '{$sSalt}',
`status` = 'active',
`role` = '1',
`date_reg` = NOW();
";
$GLOBALS['MySQL']->res($sSQL);
// autologin
$this->performLogin($sEmail, $sPassword);
// relocate back to index page
header('Location: index.php');
}
} else {
// otherwise - relocate to error page
header('Location: error.php');
}
}
// get random salt code
function getRandSaltCode($iLen = 8) {
$sRes = '';
$sChars = '23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
for ($i = 0; $i < $iLen; $i++) {
$z = rand(0, strlen($sChars) -1);
$sRes .= $sChars[$z];
}
return $sRes;
}
// get certain member info
function getProfileInfo($i) {
$sSQL = "
SELECT *
FROM `pd_profiles`
WHERE `id` = '{$i}'
";
$aInfos = $GLOBALS['MySQL']->getAll($sSQL);
return $aInfos[0];
}
}
$GLOBALS['CMembers'] = new CMembers();
/*
* Members class
*/
class CMembers {
// constructor
function CMembers() {
session_start();
}
// get login box function
function getLoginData() {
if (isset($_GET['logout'])) { // logout process
if (isset($_SESSION['member_email']) && isset($_SESSION['member_pass']))
$this->performLogout();
}
if ($_POST && $_POST['email'] && $_POST['password']) { // login process
if ($this->checkLogin($_POST['email'], $_POST['password'], false)) { // successful login
$this->performLogin($_POST['email'], $_POST['password']);
header('Location: index.php');
exit;
}
} else { // in case if we are already logged in
if (isset($_SESSION['member_email']) && $_SESSION['member_email'] && $_SESSION['member_pass']) {
$aReplaces = array(
'{name}' => $_SESSION['member_email'],
'{status}' => $_SESSION['member_status'],
'{role}' => $_SESSION['member_role'],
);
// display Profiles menu and Logout
$sLoginMenu = <<<EOF
<li><a href="#add_form" id="add_pop">Add +</a></li>
<li>
<a href="#">Profile<span></span></a>
<ul>
<li><a href="#">Invite Friends</a></li>
<li><a href="#">Find Friends</a></li>
<li class="div"><a href="#">Boards</a></li>
<li><a href="#">Pins</a></li>
<li><a href="#">Likes</a></li>
<li class="div"><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
<li><a href="index.php?logout">Logout</a></li>
EOF;
$sExtra = <<<EOF
<!-- upload form -->
<a href="#x" class="overlay" id="add_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Upload a Pin</h2>
</div>
<form id="upload_form">
<input type="file" name="image_file" id="image_file" onchange="" />
</form>
<div id="upload_result"></div>
</div>
EOF;
return array($sLoginMenu, $sExtra);
}
}
// display Join and Login menu buttons
$sLoginMenu = <<<EOF
<li><a href="#join_form" id="join_pop">Join</a></li>
<li><a href="#login_form" id="login_pop">Login</a></li>
EOF;
$sExtra = <<<EOF
<!-- join form -->
<a href="#x" class="overlay2" id="join_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Create your account</h2>
</div>
<form method="POST" action="service.php">
<ul class="ctrl_grp">
<li>
<input type="text" name="email" />
<label>Email Address</label>
<span class="fff"></span>
</li>
<li>
<input type="password" name="password" />
<label>Password</label>
<span class="fff"></span>
</li>
<li>
<input type="text" name="first_name" />
<label>First Name</label>
<span class="fff"></span>
</li>
<li>
<input type="text" name="last_name" />
<label>Last Name</label>
<span class="fff"></span>
</li>
</ul>
<div>
<input type="hidden" name="Join" value="Join" />
<button class="submit_button" type="submit">Create Account</button>
</div>
</form>
</div>
<!-- login form -->
<a href="#x" class="overlay3" id="login_form"></a>
<div class="popup">
<div class="header">
<a class="close" href="#close">x</a>
<h2>Login</h2>
</div>
<form method="POST" action="index.php">
<ul class="ctrl_grp">
<li>
<input type="text" name="email" id="id_email">
<label>Email</label>
<span class="fff"></span>
</li>
<li>
<input type="password" name="password" id="id_password">
<label>Password</label>
<span class="fff"></span>
</li>
</ul>
<div>
<button class="submit_button" type="submit">Login</button>
</div>
</form>
</div>
EOF;
return array($sLoginMenu, $sExtra);
}
// perform login
function performLogin($sEmail, $sPass) {
$this->performLogout();
// make variables safe
$sEmail = $GLOBALS['MySQL']->escape($sEmail);
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
// $sPassEn = $aProfile['password'];
$iPid = $aProfile['id'];
$sSalt = $aProfile['salt'];
$sStatus = $aProfile['status'];
$sRole = $aProfile['role'];
$sPass = sha1(md5($sPass) . $sSalt);
$_SESSION['member_id'] = $iPid;
$_SESSION['member_email'] = $sEmail;
$_SESSION['member_pass'] = $sPass;
$_SESSION['member_status'] = $sStatus;
$_SESSION['member_role'] = $sRole;
}
// perform logout
function performLogout() {
unset($_SESSION['member_id']);
unset($_SESSION['member_email']);
unset($_SESSION['member_pass']);
unset($_SESSION['member_status']);
unset($_SESSION['member_role']);
}
// check login
function checkLogin($sEmail, $sPass, $isHash = true) {
// escape variables to make them self
$sEmail = $GLOBALS['MySQL']->escape($sEmail);
$sPass = $GLOBALS['MySQL']->escape($sPass);
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
$sPassEn = $aProfile['password'];
if ($sEmail && $sPass && $sPassEn) {
if (! $isHash) {
$sSalt = $aProfile['salt'];
$sPass = sha1(md5($sPass) . $sSalt);
}
return ($sPass == $sPassEn);
}
return false;
}
// profile registration
function registerProfile() {
$sFirstname = $GLOBALS['MySQL']->escape($_POST['first_name']);
$sLastname = $GLOBALS['MySQL']->escape($_POST['last_name']);
$sEmail = $GLOBALS['MySQL']->escape($_POST['email']);
$sPassword = $GLOBALS['MySQL']->escape($_POST['password']);
if ($sEmail && $sPassword) {
// check if email is already exists
$aProfile = $GLOBALS['MySQL']->getRow("SELECT * FROM `pd_profiles` WHERE `email`='{$sEmail}'");
if ($aProfile['id'] > 0) {
// relocate to 'error' page
header('Location: error.php');
} else {
// generate Salt and Cached password
$sSalt = $this->getRandSaltCode();
$sPass = sha1(md5($sPassword) . $sSalt);
// add new member into database
$sSQL = "
INSERT INTO `pd_profiles` SET
`first_name` = '{$sFirstname}',
`last_name` = '{$sLastname}',
`email` = '{$sEmail}',
`password` = '{$sPass}',
`salt` = '{$sSalt}',
`status` = 'active',
`role` = '1',
`date_reg` = NOW();
";
$GLOBALS['MySQL']->res($sSQL);
// autologin
$this->performLogin($sEmail, $sPassword);
// relocate back to index page
header('Location: index.php');
}
} else {
// otherwise - relocate to error page
header('Location: error.php');
}
}
// get random salt code
function getRandSaltCode($iLen = 8) {
$sRes = '';
$sChars = '23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
for ($i = 0; $i < $iLen; $i++) {
$z = rand(0, strlen($sChars) -1);
$sRes .= $sChars[$z];
}
return $sRes;
}
// get certain member info
function getProfileInfo($i) {
$sSQL = "
SELECT *
FROM `pd_profiles`
WHERE `id` = '{$i}'
";
$aInfos = $GLOBALS['MySQL']->getAll($sSQL);
return $aInfos[0];
}
}
$GLOBALS['CMembers'] = new CMembers();
The main members class contains next functions: getLoginData (this functions does several functions: login and logout processing, also it returns Join & Login menu buttons (with forms) and Upload & Logout buttons (with forms) for members), performLogin (to login), performLogout (to logout), checkLogin (to check login information), registerProfile (to register a new member), getRandSaltCode (to get random salt code), getProfileInfo (to get info about certain member). I think that it is enough functions for members for now. As you noticed, I use a new php file: error.php to generate errors, this is the very easy file:
主要的成员类包含以下功能：getLoginData(此函数具有多个功能：登录和注销处理，还返回成员的Join＆Login菜单按钮(带有表单)和Upload＆Logout按钮(带有表单))，performLogin(用于登录) )，performLogout(用于注销)，checkLogin(用于检查登录信息)，registerProfile(用于注册新成员)，getRandSaltCode(用于获取随机盐代码)，getProfileInfo(用于获取有关某些成员的信息)。 我认为目前对于成员来说已经足够了。 如您所见，我使用了一个新的php文件：error.php来生成错误，这是非常简单的文件：
error.php (error.php)
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
// login system init and generation code
list ($sLoginMenu, $sExtra) = $GLOBALS['CMembers']->getLoginData();
// draw common page
$aKeys = array(
'{menu_elements}' => $sLoginMenu,
'{extra_data}' => $sExtra,
'{images_set}' => '<center><h1>Error Occurred, please try again</h1></center>'
);
echo strtr(file_get_contents('templates/index.html'), $aKeys);
require_once('classes/CMySQL.php');
require_once('classes/CMembers.php');
// login system init and generation code
list ($sLoginMenu, $sExtra) = $GLOBALS['CMembers']->getLoginData();
// draw common page
$aKeys = array(
'{menu_elements}' => $sLoginMenu,
'{extra_data}' => $sExtra,
'{images_set}' => '<center><h1>Error Occurred, please try again</h1></center>'
);
echo strtr(file_get_contents('templates/index.html'), $aKeys);
…Finally, our last new class for today is:
…最后，我们今天的最后一班新课程是：
classes / CPhotos.php (classes/CPhotos.php)
/*
* Photos class
*/
class CPhotos {
// constructor
function CPhotos() {
}
// get all photos
function getAllPhotos() {
$sSQL = "
SELECT *
FROM `pd_photos`
ORDER BY `when` DESC
";
$aPhotos = $GLOBALS['MySQL']->getAll($sSQL);
$sPhotos = '';
$sFolder = 'photos/';
foreach ($aPhotos as $i => $aPhoto) {
$iPhotoId = (int)$aPhoto['id'];
$sFile = $aPhoto['filename'];
$sTitle = $aPhoto['title'];
$aPathInfo = pathinfo($sFolder . $sFile);
$sExt = strtolower($aPathInfo['extension']);
$sImages .= <<<EOL
<!-- pin element {$iPhotoId} -->
<div class="pin">
<div class="holder">
<div class="actions" pin_id="{$iPhotoId}">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
<a href="#" class="button comment_tr">Comment</a>
</div>
<a class="image ajax" href="service.php?id={$iPhotoId}" title="{$sTitle}">
<img alt="{$sTitle}" src="{$sFolder}{$sFile}">
</a>
</div>
<p class="desc">{$sTitle}</p>
<p class="info">
<span>XX likes</span>
<span>XX repins</span>
</p>
<form class="comment" method="post" action="" style="display: none">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>
EOL;
}
return $sImages;
}
// get certain photo info
function getPhotoInfo($i) {
$sSQL = "SELECT * FROM `pd_photos` WHERE `id` = '{$i}'";
$aInfos = $GLOBALS['MySQL']->getAll($sSQL);
return $aInfos[0];
}
// format time by timestamp
function formatTime($iSec) {
$sFormat = 'j F Y';
return gmdate($sFormat, $iSec);
}
// insert a new blank photo into DB
function insertBlankPhoto($sTitle, $iOwner) {
$sTitle = $GLOBALS['MySQL']->escape($sTitle);
$iOwner = (int)$iOwner;
$sSQL = "INSERT INTO `pd_photos` SET `title` = '{$sTitle}', `owner` = '{$iOwner}', `when` = UNIX_TIMESTAMP()";
$GLOBALS['MySQL']->res($sSQL);
return $GLOBALS['MySQL']->lastId();
}
// update filename
function updateFilename($i, $sFilename) {
$sFilename = $GLOBALS['MySQL']->escape($sFilename);
$sSQL = "UPDATE `pd_photos` SET `filename` = '{$sFilename}' WHERE `id`='{$i}'";
return $GLOBALS['MySQL']->res($sSQL);
}
}
$GLOBALS['CPhotos'] = new CPhotos();
/*
* Photos class
*/
class CPhotos {
// constructor
function CPhotos() {
}
// get all photos
function getAllPhotos() {
$sSQL = "
SELECT *
FROM `pd_photos`
ORDER BY `when` DESC
";
$aPhotos = $GLOBALS['MySQL']->getAll($sSQL);
$sPhotos = '';
$sFolder = 'photos/';
foreach ($aPhotos as $i => $aPhoto) {
$iPhotoId = (int)$aPhoto['id'];
$sFile = $aPhoto['filename'];
$sTitle = $aPhoto['title'];
$aPathInfo = pathinfo($sFolder . $sFile);
$sExt = strtolower($aPathInfo['extension']);
$sImages .= <<<EOL
<!-- pin element {$iPhotoId} -->
<div class="pin">
<div class="holder">
<div class="actions" pin_id="{$iPhotoId}">
<a href="#" class="button">Repin</a>
<a href="#" class="button">Like</a>
<a href="#" class="button comment_tr">Comment</a>
</div>
<a class="image ajax" href="service.php?id={$iPhotoId}" title="{$sTitle}">
<img alt="{$sTitle}" src="{$sFolder}{$sFile}">
</a>
</div>
<p class="desc">{$sTitle}</p>
<p class="info">
<span>XX likes</span>
<span>XX repins</span>
</p>
<form class="comment" method="post" action="" style="display: none">
<input type="hidden" name="id" value="0" />
<textarea placeholder="Add a comment..." maxlength="1000"></textarea>
<button type="button" class="button">Comment</button>
</form>
</div>
EOL;
}
return $sImages;
}
// get certain photo info
function getPhotoInfo($i) {
$sSQL = "SELECT * FROM `pd_photos` WHERE `id` = '{$i}'";
$aInfos = $GLOBALS['MySQL']->getAll($sSQL);
return $aInfos[0];
}
// format time by timestamp
function formatTime($iSec) {
$sFormat = 'j F Y';
return gmdate($sFormat, $iSec);
}
// insert a new blank photo into DB
function insertBlankPhoto($sTitle, $iOwner) {
$sTitle = $GLOBALS['MySQL']->escape($sTitle);
$iOwner = (int)$iOwner;
$sSQL = "INSERT INTO `pd_photos` SET `title` = '{$sTitle}', `owner` = '{$iOwner}', `when` = UNIX_TIMESTAMP()";
$GLOBALS['MySQL']->res($sSQL);
return $GLOBALS['MySQL']->lastId();
}
// update filename
function updateFilename($i, $sFilename) {
$sFilename = $GLOBALS['MySQL']->escape($sFilename);
$sSQL = "UPDATE `pd_photos` SET `filename` = '{$sFilename}' WHERE `id`='{$i}'";
return $GLOBALS['MySQL']->res($sSQL);
}
}
$GLOBALS['CPhotos'] = new CPhotos();
There are several more functions like: getAllPhotos (to get all set of photos for our index page), getPhotoInfo (to get info about certain image), formatTime (to format time for bigger popup version), insertBlankPhoto and updateFilename (to add a new image into database and update filename for that image)
还有其他一些功能，例如：getAllPhotos(获取索引页面的所有照片集)，getPhotoInfo(获取有关特定图像的信息)，formatTime(格式化较大的弹出版本的时间)，insertBlankPhoto和updateFilename(添加新的图片进入数据库并更新该图片的文件名)
步骤4. CSS (Step 4. CSS)
In order to handle with two new forms (Join and Login) I had to update a bit popup styles:
为了处理两种新形式(Join和Login)，我不得不更新一些弹出样式：
css / main.css (css/main.css)
/* upload form styles */
.overlay, .overlay2, .overlay3 {
background-color: #FFFFFF;
bottom: 0;
display: none;
left: 0;
opacity: 0.8;
position: fixed;
right: 0;
top: 0;
z-index: 9;
}
.overlay:target, .overlay2:target, .overlay3:target {
display: block;
}
.popup {
background: none repeat scroll 0 0 #FCF9F9;
border: 1px solid #F7F5F5;
box-shadow: 0 2px 5px rgba(34, 25, 25, 0.5);
display: inline-block;
left: 50%;
padding: 30px 30px 20px;
position: fixed;
top: 40%;
visibility: hidden;
width: 550px;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.overlay:target+.popup, .overlay2:target+.popup, .overlay3:target+.popup {
top: 50%;
opacity: 1 ;
visibility: visible;
}
/* upload form styles */
.overlay, .overlay2, .overlay3 {
background-color: #FFFFFF;
bottom: 0;
display: none;
left: 0;
opacity: 0.8;
position: fixed;
right: 0;
top: 0;
z-index: 9;
}
.overlay:target, .overlay2:target, .overlay3:target {
display: block;
}
.popup {
background: none repeat scroll 0 0 #FCF9F9;
border: 1px solid #F7F5F5;
box-shadow: 0 2px 5px rgba(34, 25, 25, 0.5);
display: inline-block;
left: 50%;
padding: 30px 30px 20px;
position: fixed;
top: 40%;
visibility: hidden;
width: 550px;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.overlay:target+.popup, .overlay2:target+.popup, .overlay3:target+.popup {
top: 50%;
opacity: 1 ;
visibility: visible;
}
And, I added new styles for our new both forms:
而且，我为这两种新形式添加了新样式：
/* login & join form styles */
.ctrl_grp li {
display: block;
font-size: 21px;
list-style: none outside none;
margin-bottom: 18px;
position: relative;
}
.ctrl_grp input[type="text"], .ctrl_grp input[type="password"] {
background-color: transparent;
border: 1px solid #AD9C9C;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.15) inset, 0 1px #FFFFFF;
color: #221919;
display: block;
font-size: 18px;
line-height: 1.4em;
padding: 6px 12px;
position: relative;
transition: all 0.08s ease-in-out 0s;
width: 95%;
z-index: 3;
}
.ctrl_grp input[type="text"]:focus, .ctrl_grp input[type="password"]:focus {
border-color: ##993300;
box-shadow: 0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(235, 82, 82, 0.35);
}
.ctrl_grp label {
-moz-user-select: none;
color: #EFEFEF;
display: block;
font-size: 18px;
left: 13px;
line-height: 1.4em;
position: absolute;
top: 5px;
transition: all 0.16s ease-in-out 0s;
z-index: 2;
}
.ctrl_grp .fff {
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.submit_button {
background-image: -moz-linear-gradient(center top , #FDFAFB, #F9F7F7 50%, #F6F3F4 50%, #F0EDED);
border: 1px solid #BBBBBB;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset;
color: #524D4D;
cursor: pointer;
display: inline-block;
font-family: "helvetica neue",arial,sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1em;
margin: 0;
padding: 0.45em 0.825em;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
transition: all 0.05s ease-in-out 0s;
}
.submit_button:hover {
box-shadow: 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(232, 230, 230, 0.75);
}
/* login & join form styles */
.ctrl_grp li {
display: block;
font-size: 21px;
list-style: none outside none;
margin-bottom: 18px;
position: relative;
}
.ctrl_grp input[type="text"], .ctrl_grp input[type="password"] {
background-color: transparent;
border: 1px solid #AD9C9C;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.15) inset, 0 1px #FFFFFF;
color: #221919;
display: block;
font-size: 18px;
line-height: 1.4em;
padding: 6px 12px;
position: relative;
transition: all 0.08s ease-in-out 0s;
width: 95%;
z-index: 3;
}
.ctrl_grp input[type="text"]:focus, .ctrl_grp input[type="password"]:focus {
border-color: ##993300;
box-shadow: 0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(235, 82, 82, 0.35);
}
.ctrl_grp label {
-moz-user-select: none;
color: #EFEFEF;
display: block;
font-size: 18px;
left: 13px;
line-height: 1.4em;
position: absolute;
top: 5px;
transition: all 0.16s ease-in-out 0s;
z-index: 2;
}
.ctrl_grp .fff {
background-color: #FFFFFF;
border-radius: 8px 8px 8px 8px;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.submit_button {
background-image: -moz-linear-gradient(center top , #FDFAFB, #F9F7F7 50%, #F6F3F4 50%, #F0EDED);
border: 1px solid #BBBBBB;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset;
color: #524D4D;
cursor: pointer;
display: inline-block;
font-family: "helvetica neue",arial,sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1em;
margin: 0;
padding: 0.45em 0.825em;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.9);
transition: all 0.05s ease-in-out 0s;
}
.submit_button:hover {
box-shadow: 0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(232, 230, 230, 0.75);
}
现场演示
结论 (Conclusion)
We have just finished our third lesson where we writing our own Pinterest-like script. I hope that you like it. It would be kind of you to share our materials with your friends. Good luck and welcome back!
我们刚刚结束了第三课，我们在其中编写了自己的类似Pinterest的脚本。 我希望你喜欢。 您希望与朋友分享我们的资料。 祝你好运，欢迎回来！
翻译自: https://www.script-tutorials.com/pinterest-like-script-step-3/
6187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
