Tự Tạo Web Tin Tức Bằng PHP ( Phần 3)
Ở 2 phần trước mình đã giới thiệu cho các bạn ngôn ngữ lập trình PHP, kỹ thuật Crawl dữ liệu, cách chia layout và load dữ liệu ra trang chủ rồi. Hôm nay mình sẽ tiếp tục hướng dẫn các bạn hoàn thiện trang web crawl tin tức nha
Bước 1: Xử lý chuỗi
Trước tiên mình sẽ hướng dẫn các bạn xử lý chuỗi để có được source và description của tin.
Một item sẽ có dạng như sau.
<item>
<title>San lấp bờ biển không phép ở Mũi Né</title>
<description>
<a href="https://vnexpress.net/san-lap-bo-bien-khong-phep-o-mui-ne-4109762.html">
<img src="https://i1-vnexpress.vnecdn.net/2020/06/03/DSC08820-1591162780-4716-1591176923.jpg?w=900&h=0&q=100&dpr=1&fit=crop&s=BFMPLBPs5eGKrOeQ2vygDQ" >
</a></br>
Công ty du lịch vận chuyển hàng nghìn m3 cát bên hướng đồi qua san lấp mặt bằng trái phép ở bờ biển Mũi Né, TP Phan Thiết.
</description>
<pubDate>Thu, 04 Jun 2020 09:44:52 +0700</pubDate>
<link>
https://vnexpress.net/san-lap-bo-bien-khong-phep-o-mui-ne-4109762.html
</link>
<guid>
https://vnexpress.net/san-lap-bo-bien-khong-phep-o-mui-ne-4109762.html
</guid>
<slash:comments>0</slash:comments>
</item>Các bạn thấy thẻ description chứa src của ảnh và cả description của item, nên mình sẽ dùng hàm explode() của php để cắt chuỗi này.
Hàm explode trong PHP cho phép bạn chuyển một chuỗi sang một mảng dựa trên các ký tự phân cách.
Cú pháp của hàm explode:
explode(separator,string,limit)
Trong đó:
separator: là chuỗi ranh giới bao gồm ký tự hoặc chuỗi ký tự phân cách sử dụng để phân biệt các phần tử trong chuỗi.
string: Chuỗi đầu vào, chuỗi cần tách thành mảng.
limit: xác định số phần tử của mảng đầu ra.
Nếu limit được thiết lập, mảng được trả về sẽ chứa tối đa các limit phần tử có phần tử cuối cùng chứa phần còn lại của phần tử string.
Nếu limit tham số là số âm, tất cả các thành phần ngoại trừ tham số cuối cùng limit được trả về.
Nếu limit tham số bằng không, thì điều này được coi là 1.xác định số phần tử của mảng đầu ra.
Giá trị của thẻ description chuỗi
<a href="https://vnexpress.net/san-lap-bo-bien-khong-phep-o-mui-ne-4109762.html"><img src="https://i1-vnexpress.vnecdn.net/2020/06/03/DSC08820-1591162780-4716-1591176923.jpg?w=900&h=0&q=100&dpr=1&fit=crop&s=BFMPLBPs5eGKrOeQ2vygDQ" ></a></br>Công ty du lịch vận chuyển hàng nghìn m3 cát bên hướng đồi qua san lấp mặt bằng trái phép ở bờ biển Mũi Né, TP Phan Thiết.Nên mình cắt tại chuỗi ranh giới là “src=” mình sẽ có được chuỗi con là
<a href="https://vnexpress.net/san-lap-bo-bien-khong-phep-o-mui-ne-4109762.html"><imgvà
"https://i1-vnexpress.vnecdn.net/2020/06/03/DSC08820-1591162780-4716-1591176923.jpg?w=900&h=0&q=100&dpr=1&fit=crop&s=BFMPLBPs5eGKrOeQ2vygDQ" ></a></br>Công ty du lịch vận chuyển hàng nghìn m3 cát bên hướng đồi qua san lấp mặt bằng trái phép ở bờ biển Mũi Né, TP Phan Thiết.Mình tiếp tục cắt chuỗi thứ 2 tại ranh giới là “></a></br>” mình sẽ được đường link của ảnh là:
và description “Công ty du lịch vận chuyển hàng nghìn m3 cát bên hướng đồi qua san lấp mặt bằng trái phép ở bờ biển Mũi Né, TP Phan Thiết.”
Code như sau.
$str = explode('src=', $items->description);
$str1 = explode('></a></br>', $str[1]);
$srcImage = $str1[0];
$description = $str1[1];Bước 2: Tạo trang loại tin
Tạo file get_data_loai_tin.php trong folder getdata để lấy dữ liệu các loại tin.
<?php
if($_GET['loaitin']) {
$url='https://vnexpress.net/rss/'.$_GET['loaitin'].'.rss';
$lines_array=file($url);
$lines_string=implode('',$lines_array);
$xml = simplexml_load_string($lines_string);
if ($xml === false) {
echo "Failed loading XML: ";
foreach(libxml_get_errors() as $error) {
echo "<br>", $error->message;
}
}
$url_giai_tri='https://vnexpress.net/rss/giai-tri.rss';
$lines_array_giai_tri=file($url_giai_tri);
$lines_string_giai_tri=implode('',$lines_array_giai_tri);
$xml_giai_tri = simplexml_load_string($lines_string_giai_tri);
if ($xml_giai_tri === false) {
echo "Failed loading XML: ";
foreach(libxml_get_errors() as $error) {
echo "<br>", $error->message;
}
}
$url_cuoi='https://vnexpress.net/rss/cuoi.rss';
$lines_array_cuoi=file($url_cuoi);
$lines_string_cuoi=implode('',$lines_array_cuoi);
$xml_cuoi = simplexml_load_string($lines_string_cuoi);
if ($xml_cuoi === false) {
echo "Failed loading XML: ";
foreach(libxml_get_errors() as $error) {
echo "<br>", $error->message;
}
}
}
?>Import header và footer. Sau đó sửa phần menu.
header.php
<header>
<div class="header-top">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-6 header-top-left no-padding">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-6 header-top-right no-padding">
<ul>
<li>
<a href="tel:+440 012 3654 896">
<span class="lnr lnr-phone-handset"></span>
<span>+84 798 132 465</span>
</a>
</li>
<li>
<a href="mailto:ntnghia@gmail.com">
<span class="lnr lnr-envelope"></span>
<span>ntnghia@gmail.com</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-4 col-md-4 col-sm-12 logo-left no-padding">
<a href="index.html">
<img class="img-fluid" src="img/logo.png" alt="">
</a>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 logo-right no-padding ads-banner">
<img class="img-fluid" src="img/banner.png" alt="">
</div>
</div>
</div>
</div>
<div class="container main-menu" id="main-menu">
<div class="row align-items-center justify-content-between">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">
<a href="index.php">Trang Chủ</a>
</li>
<li class="menu-has-children">
<a href="tintuc.php?loaitin=thoi-su&tenloaitin=Thời Sự">Thời Sự</a>
</li>
<li class="menu-has-children">
<a href="tintuc.php?loaitin=the-gioi&tenloaitin=Thế Giới">Thế Giới</a>
</li>
<li class="menu-has-children">
<a href="tintuc.php?loaitin=startup&tenloaitin=Startup">Startup</a>
</li>
<li class="menu-has-children">
<a href="tintuc.php?loaitin=giai-tri&tenloaitin=Giải Trí">Giải Trí</a>
</li>
<li class="menu-has-children">
<a href="">Xem Thêm</a>
<ul>
<li>
<a href="tintuc.php?loaitin=the-thao&tenloaitin=Thể Thao">Thể Thao</a>
</li>
<li>
<a href="tintuc.php?loaitin=du-lich&tenloaitin=Du Lịch">Du Lịch</a>
</li>
<li>
<a href="tintuc.php?loaitin=so-hoa&tenloaitin=Số Hóa">Số Hóa</a>
</li>
<li>
<a href="tintuc.php?loaitin=cuoi&tenloaitin=Cười">Cười</a>
</li>
</ul>
</li>
<li>
<a href="chitiet.php">Chi Tiết</a>
</li>
<li>
<a href="lienhe.php">Liên Hệ</a>
</li>
</ul>
</nav><!-- #nav-menu-container -->
<div class="navbar-right">
<form class="Search">
<input type="text" class="form-control Search-box" name="Search-box" id="Search-box" placeholder="Search">
<label for="Search-box" class="Search-box-label">
<span class="lnr lnr-magnifier"></span>
</label>
<span class="Search-close">
<span class="lnr lnr-cross"></span>
</span>
</form>
</div>
</div>
</div>
</header>footer.php
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 single-footer-widget">
<h4>Top Sản Phẩm</h4>
<ul>
<li><a href="#">Trang web được quản lý</a></li>
<li><a href="#">Quản lý uy tín</a></li>
<li><a href="#">Công cụ quyền hạn</a></li>
<li><a href="#">Dịch vụ tiếp thị</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Link Nhanh</h4>
<ul>
<li><a href="#">Công việc</a></li>
<li><a href="#">Tài sản thương hiệu</a></li>
<li><a href="#">Quan hệ đầu tư</a></li>
<li><a href="#">Điều khoản dịch vụ</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Tính năng</h4>
<ul>
<li><a href="#">Công cụ</a></li>
<li><a href="#">Tài sản</a></li>
<li><a href="#">Quản lý dịch vụ</a></li>
<li><a href="#">Thương hiệu</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Tài nguyên</h4>
<ul>
<li><a href="#">Hướng dẫn</a></li>
<li><a href="#">Nghiên cứu</a></li>
<li><a href="#">Các chuyên gia</a></li>
<li><a href="#">Cơ quan</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 single-footer-widget">
<h4>Instragram Feed</h4>
<ul class="instafeed d-flex flex-wrap">
<li><img src="img/i1.jpg" alt=""></li>
<li><img src="img/i2.jpg" alt=""></li>
<li><img src="img/i3.jpg" alt=""></li>
<li><img src="img/i4.jpg" alt=""></li>
<li><img src="img/i5.jpg" alt=""></li>
<li><img src="img/i6.jpg" alt=""></li>
<li><img src="img/i7.jpg" alt=""></li>
<li><img src="img/i8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Design ©
<script>
document.write(new Date().getFullYear());
</script>
<i class="fa fa-heart-o" aria-hidden="true"></i> by Ngọc Anh</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-behance"></i></a>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->Vì trang loại tin có phần bài đăng về giải trí và bài đăng về tin vui nên mình import từ layoutcontent luôn.
Đổ dữ liệu ra phần content loại tin.
Lưu ý: Phần phân trang mình sẽ gọi lại link trang loại tin và truyền vào biến more biến more sẽ là số limit của vòng foreach.
<?php
include 'getdata/get_data_loai_tin.php';
?>
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="colorlib">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>CodeLearnNews</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- START HEADER -->
<?php
include 'layout/header.php';
?>
<!-- END HEADER -->
<div class="site-main-container">
<!-- Start latest-post Area -->
<section class="latest-post-area pb-120">
<div class="container no-padding">
<div class="row">
<div class="col-lg-8 post-list">
<!-- Start latest-post Area -->
<div class="latest-post-wrap">
<h4 class="cat-title">Tin <?php echo $_GET['tenloaitin']; ?></h4>
<?php
if (isset($_GET['more']))
{
$i = 0;
foreach ($xml->xpath('//channel/item') as $items)
{
if ($i > $_GET['more']) {
break;
}
if (strpos($items->description, "src=")) {
$str = explode('src=', $items->description);
$str1 = explode('></a></br>', $str[1]);
?>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src=<?php echo $str1[0]; ?> >
</div>
<ul class="tags">
<li><a href="#"><?php echo $_GET['tenloaitin']; ?></a></li>
</ul>
</div>
<div class="col-lg-7 post-right">
<a href="<?php echo $items->link; ?>">
<h4>
<?php echo $items->title; ?>
</h4>
</a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-calendar-full"></span>
<?php echo $items->pubDate; ?>
</a></li>
</ul>
<p class="excert">
<?php echo $str1[1]; ?>
</p>
</div>
</div>
<?php $i++;} }
if ($_GET['more'] < 25) { ?>
<div class="load-more">
<a href=
<?php
$link = "loaitin.php?loaitin=".$_GET['loaitin']."&tenloaitin=".$_GET['tenloaitin']."&more=25";
echo '"'.$link.'"'.'class="primary-btn"';
?> >Xem Thêm
</a>
</div>
<?php
} }
else {
$i = 0;
foreach ($xml->xpath('//channel/item') as $items)
{
if (($i > 4)) {
break;
}
if (strpos($items->description, "src=")) {
$str = explode('src=', $items->description);
$str1 = explode('></a></br>', $str[1]);
?>
<div class="single-latest-post row align-items-center">
<div class="col-lg-5 post-left">
<div class="feature-img relative">
<div class="overlay overlay-bg"></div>
<img class="img-fluid" src=<?php echo $str1[0].'"'; ?> >
</div>
<ul class="tags">
<li><a href="#"><?php echo $_GET['tenloaitin']; ?></a></li>
</ul>
</div>
<div class="col-lg-7 post-right">
<a href="<?php echo $items->link; ?>">
<h4>
<?php echo $items->title; ?>
</h4>
</a>
<ul class="meta">
<li><a href="#"><span class="lnr lnr-calendar-full"></span>
<?php echo $items->pubDate; ?>
</a></li>
</ul>
<p class="excert">
<?php echo $str1[1]; ?>
</p>
</div>
</div>
<?php $i++;} }?>
<div class="load-more">
<a href=
<?php
$link = "loaitin.php?loaitin=".$_GET['loaitin']."&tenloaitin=".$_GET['tenloaitin']."&more=10";
echo '"'.$link.'"'.'class="primary-btn"';
?> >Xem Thêm
</a>
</div>
<?php } ?>
</div>
<!-- End latest-post Area -->
</div>
<div class="col-lg-4">
<div class="sidebars-area">
<!-- START ENTERTAIMENT POST -->
<?php
include 'layoutcontent/entertainment.php';
?>
<!-- START ENTERTAIMENT POST -->
<div class="single-sidebar-widget ads-widget">
<img class="img-fluid" src="img/banner-3.jpg" alt="">
</div>
<div class="single-sidebar-widget newsletter-widget">
<h6 class="title">Thông Báo</h6>
<p>
Đăng ký để nhận thông báo qua Email.
</p>
<div class="form-group d-flex flex-row">
<div class="col-autos">
<div class="input-group">
<input class="form-control" placeholder="Địa chỉ Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'" type="text">
</div>
</div>
<a href="#" class="bbtns">Đăng ký</a>
</div>
<p>
Bạn có thể hủy đăng ký chúng tôi bất cứ lúc nào.
</p>
</div>
<!-- START FUNPOST POST -->
<?php
include 'layoutcontent/funpost.php';
?>
<!-- START FUNPOST POST -->
<div class="single-sidebar-widget social-network-widget">
<h6 class="title">Mạng Xã Hội</h6>
<ul class="social-list">
<li class="d-flex justify-content-between align-items-center fb">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-facebook" aria-hidden="true"></i>
<p>983 Likes</p>
</div>
<a href="#">Like our page</a>
</li>
<li class="d-flex justify-content-between align-items-center tw">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-twitter" aria-hidden="true"></i>
<p>983 Followers</p>
</div>
<a href="#">Follow Us</a>
</li>
<li class="d-flex justify-content-between align-items-center yt">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<p>983 Subscriber</p>
</div>
<a href="#">Subscribe</a>
</li>
<li class="d-flex justify-content-between align-items-center rs">
<div class="icons d-flex flex-row align-items-center">
<i class="fa fa-rss" aria-hidden="true"></i>
<p>983 Subscribe</p>
</div>
<a href="#">Subscribe</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End latest-post Area -->
</div>
<!-- start footer Area -->
<?php
include 'layout/footer.php';
?>
<!-- End footer Area -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/easing.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/mn-accordion.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Bước 3: Chạy trên trình duyệt
Các bạn bật service apache trong xampp lên sau đó vào trình duyệt nhập link http://localhost/CodeLearnNews/ sau đó vào trang thời sự và các trang khác để kiểm tra xem trang có hoạt động như ý không nha.
Các bạn cũng có thể đổi logo thành logo Code Learn để quảng bá cho mọi người biết cộng đồng học lập trình của chúng ta nha.
Kết quả
Source code
https://github.com/ntn21032000/CodeLearnNews
Tạm kết
Vậy là mình đã hướng dẫn cho các bạn cách tạo 1 trang web tin tức của chính mình rồi, thật dễ phải không nào. Trong phần cuối mình sẽ hướng dẫn các bạn tạo tài khoản và deploy web lên free host để có thể truy cập mọi lúc mọi nơi qua internet nha.
Post Comment