Tự Tạo Web Tin Tức Bằng PHP ( Phần 2)

Tự Tạo Web Tin Tức Bằng PHP ( Phần 2)

phần 1 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 website và crawl dữ liệu được VNExpress chia sẻ trên https://vnexpress.net/rss về trang web và load ra được dữ liệu thô rồi. Trong phần này mình sẽ hướng dẫn cho các bạn cách download template (các bạn có thể tự chọn template nào các bạn thích), chia layout, load dữ liệu tin tức ra trang chủ(index).

Bắt đầu luôn cho nóng nha.

Download template và load dữ liệu

Bước 1: Chọn template bạn thích và down về

Trang này có rất nhiều template đẹp cho các bạn tha hồ lựa chọn , mình sẽ chọn template này https://colorlib.com/wp/template/magazine/ vì mình thấy nó đơn giản mà đẹp. Sau đó coppy folder css, fonts, img, js, scss và các file about.html, contact.html, index.html, mail.php và đổi tên các đuôi html sang php.

Bước 2: Tạo folder layout

Layout sẽ bao gồm header (bao gồm menu), footer và phần content vì phần header và footer được sử dụng cả trong trang index và trang loại tin nên mình tạo folder layout để dễ quản lý. Folder layout sẽ chứa file header.php và footer.php cắt từ thẻ header và footer trong trang index.php. Sau khi cắt mình import header và footer vào trang index.php lại. Các trang contact.php và about.php tương tự mình xóa 2 thẻ header và footer sau đó import từ folder layout.

Bước 3: Tạo trang index

Đầu tiên mình import file get_data_home.php và sửa để lấy được hết data cần thiết.

<?php
$url='https://vnexpress.net/rss/thoi-su.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_so_hoa='https://vnexpress.net/rss/so-hoa.rss';
$lines_array_so_hoa=file($url_so_hoa);
$lines_string_so_hoa=implode('',$lines_array_so_hoa);

$xml_so_hoa = simplexml_load_string($lines_string_so_hoa);
if ($xml_so_hoa === false) {
    echo "Failed loading XML: ";
    foreach(libxml_get_errors() as $error) {
        echo "<br>", $error->message;
    }
}


$url_the_thao='https://vnexpress.net/rss/the-thao.rss';
$lines_array_the_thao=file($url_the_thao);
$lines_string_the_thao=implode('',$lines_array_the_thao);

$xml_the_thao = simplexml_load_string($lines_string_the_thao);
if ($xml_the_thao === 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_du_lich='https://vnexpress.net/rss/du-lich.rss';
$lines_array_du_lich=file($url_du_lich);
$lines_string_du_lich=implode('',$lines_array_du_lich);

$xml_du_lich = simplexml_load_string($lines_string_du_lich);
if ($xml_du_lich === 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;
    }
}
?>

Giao diện bao gồm header, bài đăng hot, bài đăng mới nhất, bài đăng về du lịch, bài đăng về thể thao, bài đăng về giải trí và bài đăng tin vui. Ở đây mình cũng chia các bài đăng vào folder layoutcontent cho dễ quản lý nha.

Import các trang vừa chia vào index.php.

	<body>

		<!-- START HEADER -->
		<?php
			include 'layout/header.php';
		?>
		<!-- END HEADER -->

		<div class="site-main-container">

			<!-- START HOT POST -->
			<?php
				include 'layoutcontent/toppost.php';
			?>
			<!--END HOT POST -->

			<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 -->
							<?php
								include 'layoutcontent/latestpost.php';
							?>
							<!-- END LATEST POST -->

							<!-- Start banner-ads Area -->
							<div class="col-lg-12 ad-widget-wrap mt-30 mb-30">
								<img class="img-fluid" src="img/banner-1.png" alt="">
							</div>
							<!-- End banner-ads Area -->

							<!-- START TRAVEL AND SPORT POST -->
							<?php 
								include 'layoutcontent/travelpost.php';
								include 'layoutcontent/sportpost.php';
							?>
							<!-- END TRAVEL AND SPORT POST -->

						</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>
						</div>
					</div>
				</div>
			</section>
		</div>

		<!-- START FOOTER -->
		<?php
			include 'layout/footer.php';
		?>
		<!-- END FOOTER -->

		<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>

Đổ dữ liệu ra mục bài đăng hot(toppost.php).

<!-- Start top-post Area -->
<section class="top-post-area pt-10">

	<div class="container no-padding">

		<div class="row small-gutters">

			<div class="col-lg-8 top-post-left">
				<?php
					$i = 0;
					foreach ($xml_so_hoa->xpath('//channel/item') as $items)
					{
					if (($i == 1)) {
						break;
					}
					if (strpos($items->description, "src=")) {
						$str = explode('src=', $items->description);
						$str1 = explode('></a>', $str[1]);
				?>
				<div class="feature-image-thumb relative">
					<div class="overlay overlay-bg"></div>
					<img class="img-fluid" src=<?php echo $str1[0].'"'; ?> >
				</div>
				<div class="top-post-details">
					<ul class="tags">
						<li><a href="#">Hot</a></li>
					</ul>
					<a href="<?php echo $items->link; ?>">
						<h3><?php echo $items->title; ?></h3>
					</a>
					<ul class="meta">
						<li><a href="#"><span class="lnr lnr-calendar-full"></span><?php echo $items->pubDate; ?></a></li>
					</ul>
				</div>
				<?php
					$i=1;
					}
					}
				?>
			</div>

			<div class="col-lg-4 top-post-right">

				<div class="single-top-post">
				    <?php
					    $i = 0;
					    foreach ($xml_so_hoa->xpath('//channel/item') as $items)
					    {
					    	if (($i == 2)){
					        	break;
					      	}
					    	if (strpos($items->description, "src=") && ($i != 1)) {
						        $i++;
						        continue;
					      	}
					      	if (strpos($items->description, "src=")) {
							    $str = explode('src=', $items->description);
							    $str1 = explode('></a>', $str[1]);
				    ?>
					<div class="feature-image-thumb relative">
						<div class="overlay overlay-bg"></div>
						<img class="img-fluid" src=<?php echo $str1[0].'"'; ?>>
					</div>
					<div class="top-post-details">
						<ul class="tags">
							<li><a href="#">Hot</a></li>
						</ul>
						<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>
					</div>
	    			<?php
	    				$i=2;
	    				} 
	    				}
					?>
				</div>

				<div class="single-top-post mt-10">
				    <?php
					    $i = 0;
					    foreach ($xml_so_hoa->xpath('//channel/item') as $items)
					    {
					    if (($i == 3)) {
					        break;
					      }
					    if (strpos($items->description, "src=") && ($i != 2)) {
					        $i++;
					        continue;
					      }
					    if (strpos($items->description, "src=")) {
					        $str = explode('src=', $items->description);
					      	$str1 = explode('></a>', $str[1]);
				    ?>
					<div class="feature-image-thumb relative">
						<div class="overlay overlay-bg"></div>
						<img class="img-fluid" src=<?php echo $str1[0].'"'; ?>>
					</div>
					<div class="top-post-details">
						<ul class="tags">
							<li><a href="#">Hot</a></li>
						</ul>
						<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>
					</div>
	    			<?php
	    				$i=3;
	    				} 
	    				} 
	    			?>
				</div>
			</div>
			<div class="col-lg-12">
			</div>
		</div>
	</div>
</section>
<!-- End top-post Area -->

Đổ dữ liệu ra mục bài đăng mới nhất (latestpost.php).

<!-- Start latest-post Area -->
<div class="latest-post-wrap">
	<h4 class="cat-title">Tin Mới Nhất</h4>
	<?php
	$i = 0;
	foreach ($xml->xpath('//channel/item') as $items)
	{
		if (($i > 4)) {
			break;
		}
		if (strpos($items->description, "src=") && ($i < 6)) {
			$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="#">Tin mới nhất</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-user"></span>Mark wiens</a></li> -->
				<li><a href="#"><span class="lnr lnr-calendar-full"></span>
					<?php echo $items->pubDate; ?>
				</a></li>
				<!-- <li><a href="#"><span class="lnr lnr-bubble"></span>Comments</a></li> -->
			</ul>
			<p class="excert">
				<?php echo $str1[1]; ?>
			</p>
		</div>
	</div>
	<?php $i++;} } ?>
</div>
<!-- End latest-post Area -->

Đổ dữ liệu ra mục bài đăng về du lịch(travelpost.php).

<div class="popular-post-wrap">
	<h4 class="title">Du lịch</h4>
	<div class="feature-post relative">
		<?php
			$i = 0;
			foreach ($xml_du_lich->xpath('//channel/item') as $items)
			{
		    if (($i == 1)) {
		      break;
		    }
		    if (strpos($items->description, "src=")) {
		        $str = explode('src=', $items->description);
				$str1 = explode('></a></br>', $str[1]);
		?>
		<div class="feature-img relative">
			<div class="overlay overlay-bg">
			</div>
			<img class="img-fluid" src=<?php echo $str1[0].'"'; ?> >
		</div>
		<div class="details">
			<ul class="tags">
				<li><a href="#">Du lịch</a></li>
			</ul>
			<a href="<?php echo $items->link; ?>">
				<h3><?php echo $items->title; ?></h3>
			</a>
			<ul class="meta">
				<li>
					<a href="#">
						<span class="lnr lnr-calendar-full"></span>
						<?php echo $items->pubDate; ?>
					</a>
				</li>
			</ul>
		</div>
			<?php
				$i=1;
				}
				}
			?>
	</div>

	<div class="row mt-20 medium-gutters">
		<div class="col-lg-6 single-popular-post">
	        <?php
		        $i = 0;
		        foreach ($xml_du_lich->xpath('//channel/item') as $items)
		        {
			        if (($i == 2)) {
			            break;
			        }
			        if (strpos($items->description, "src=") && ($i != 1)) {
			            $i++;
			            continue;
			        }
			        if (strpos($items->description, "src=")) {
			            $str = explode('src=', $items->description);
						$str1 = explode('></a></br>', $str[1]);
	        ?>
			<div class="feature-img-wrap relative">
				<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="#">Du lịch</a></li>
				</ul>
			</div>
			<div class="details">
				<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>
	        <?php
	        	$i=2;
	    		}
	    		}
			?>
		</div>

		<div class="col-lg-6 single-popular-post">
	        <?php
		        $i = 0;
		        foreach ($xml_du_lich->xpath('//channel/item') as $items)
		        {
			        if (($i == 3)) {
			            break;
			        }
			        if (strpos($items->description, "src=") && ($i != 2)) {
			            $i++;
			            continue;
			        }
			        if (strpos($items->description, "src=")) {
			            $str = explode('src=', $items->description);
						$str1 = explode('></a></br>', $str[1]);
	        ?>
			<div class="feature-img-wrap relative">
				<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="#">Du lịch</a></li>
				</ul>
			</div>
			<div class="details">
				<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>
		        <?php
			        $i=3;
			    	}
			    	}
		        ?>
		</div>
	</div>
</div>

Đổ dữ liệu ra mục bài đăng về thể thao(sportpost.php).

<div class="relavent-story-post-wrap mt-30">
	<h4 class="title">Thể Thao</h4>
	<div class="relavent-story-list-wrap">
		<?php
			$i = 0;
			foreach ($xml_the_thao->xpath('//channel/item') as $items)
			{
			if (($i > 2)) {
				break;
			}
			if (strpos($items->description, "src=") && ($i < 6)) {
				$str = explode('src=', $items->description);
				$str1 = explode('></a></br>', $str[1]);
		?>
		<div class="single-relavent-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="#">Thể thao</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>
</div>

Đổ dữ liệu ra mục bài đăng về giải trí(entertainment.php).

<div class="single-sidebar-widget editors-pick-widget">
	<h6 class="title">Giải trí</h6>
	<div class="editors-pick-post">
		<div class="feature-img-wrap relative">
			<?php
			$i = 0;
			foreach ($xml_giai_tri->xpath('//channel/item') as $items)
			{
			if (($i == 1)) {
			  break;
			}
			if (strpos($items->description, "src=")) {
			  $str = explode('src=', $items->description);
			  $str1 = explode('></a></br>', $str[1]);
			?>
			<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="#">Giải trí</a></li>
			</ul>
		</div>

		<div class="details">
			<a href="<?php echo $items->link; ?>">
				<h4 class="mt-20"><?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>
      		<?php $i=1;} } ?>
		</div>

		<div class="post-lists">
      <?php
        $i = 0;
        foreach ($xml_giai_tri->xpath('//channel/item') as $items)
        {
          if (($i > 3)) {
            break;
          }
          if (strpos($items->description, "src=")) {
            if ($i == 0) {
              $i++;
              continue;
            }
            $str = explode('src=', $items->description);
            $str1 = explode('></a></br>', $str[1]);
            $src = $str1[0];
            $time = substr($items->pubDate, 0, 11);
      ?>
			<div class="single-post d-flex flex-row">
				<div class="thumb">
					<img class="img-fluid" src=<?php echo $str1[0].'"'; ?> >
				</div>
				<div class="detail">
					<a href="<?php echo $items->link; ?>">
            <h6><?php echo $items->title; ?></h6>
          </a>
					<ul class="meta">
						<li><a href="#"><span class="lnr lnr-calendar-full"></span>
              <?php echo $time; ?>
            </a></li>
					</ul>
				</div>
			</div>
      <?php $i++; } } ?>
		</div>
	</div>
</div>

Đổ dữ liệu ra mục bài đăng tin vui(funpost.php).

<div class="single-sidebar-widget most-popular-widget">
	<h6 class="title">Cười</h6>
	<?php
		$i = 0;
			foreach ($xml_cuoi->xpath('//channel/item') as $items)
		{
		if (($i > 2)) {
			break;
		}
		if (strpos($items->description, "src=") && ($i < 6)) {
			$str = explode('src=', $items->description);
			$str1 = explode('></a></br>', $str[1]);
			$src = $str1[0];
			$time = substr($items->pubDate, 0, 11);
	?>
			<div class="single-list flex-row d-flex">
				<div class="thumb">
					<img class="img-fluid" src=<?php echo $str1[0].'"'; ?> alt="">
				</div>
				<div class="details">
					<a href="<?php echo $items->link; ?>">
						<h6><?php echo $items->title; ?></h6>
					</a>
					<ul class="meta">
						<li>
							<a href="#">
								<span class="lnr lnr-calendar-full"></span>
								<?php echo $time; ?>
							</a>
						</li>
					</ul>
				</div>
			</div>
            <?php $i++;} } ?>
</div>

Bước 4: 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/.

Tạm kết

Mình đã hướng dẫn cho các bạn cách download template, chia layout, load dữ liệu tin tức ra trang chủ(index) trong phần 2 này. Các bạn chú ý làm đúng như hướng dẫn để tránh xảy ra lỗi không mong muốn nha, nếu có lỗi thì hãy bình tĩnh  fix nha. Trong phần tiếp theo mình sẽ hướng dẫn các bạn tạo trang loại tin, sửa header(menu) và hoàn thiện trang web. Chúc các bạn thành công!

Bonus source: https://github.com/ntn21032000/CodeLearnNews