image

PHP - somo la 37: Jinsi ya kutengeneza blo post kwa kutumia PHP

Katika somo hili utajifunza jinsi ambavyo unaweza kutengeneza blog ambayo utaweza ku upload faili na kuandika makala kwa kutumia PHP

Katika somo hili utajifunz ajinsi ya kusoma taarifa kwenye database. Somo hili litajikita zaidi katika kukupatia msingi wa kuweza kutengeneza blog yako. Tutasoma data hizi katika namna kuu mbili. Namna ya kwanza ni kusoma mafaili na namna ya pili  i kusoma taarifa za maandishi.

 

Hasa katika somo hili utajifunza jinsi ya kusafirisha taarifa kwenye php kwa kutumia GET method. Ni kama tulivyoona kwenye form tumetumia POST method. GET method husaidia katika kusafirisha taarifa kwenye url.

 

Hivyo basi tengeneza filda liite web, kisha weka ndani yake folda lingine liite upload. Kisha tengneza mafaili  10 kama inavyoonekana hapo kwenye picha chini 

Somo hili ni kama vile tunakwenda kutengeneza kajiblog kadogo. Kwa kuwa tunakwenda kuweka post yenye pich. Kisha tutajifunza ku edit, baada ya hapo tutajifunza kufuta post na kwenye database na kufuta faili kwenye folda. Tutakwenda kupitia faili moja baada ya jingine.

 

  1. config.php

Hili ndilo faili letu lwa kwanza ambapo tutakwenda kuunganisha database. Code za ku connect databse zipo kwenye somo lililotangaulia. Nimeziandika tena hapo chini unaweza kuzikopi. Kumbuka kwa wale wanaotumia simu host yao ni 0.0.0.0:3306

<?php

$servername = "localhost";

$username = "root";

$password ="";

$dbname = "test";

 

// Kufanya connection

$conn=mysqli_connect($servername,  $username,$password,$dbname);

 

// kuangalia connection

if(!$conn){die("Connection failed: ".mysqli_connect_error());

}

mysqli_close($conn);

?>

 

  1. post.php

Katika faili hili sasa tunakwenda ku code ili tuweze ku post data zetu kwenye database. Sasa kw aufupi tunataka tuweke blog post ambayo itakuwa na kichwa cha habari, muhtasari, habari nzima, picha, muda ilipoandikwa na jina la mwandishi.

 

Hivyo basi unataiwa utengeneze table yenye jina blog kwenye database yako yenye column 7 ambazo ni id, title, summary, content, post_time, publisher na picture. Kumbuka id inatakiwa iwe AI yaani Auto Increment. Tumia code hizo hapo chini

CREATE TABLE `blog` (

 `id` int(11) NOT NULL,

 `title` varchar(255) NOT NULL,

 `summary` varchar(255) NOT NULL,

 `content` text NOT NULL,

 `post_time` varchar(255) NOT NULL,

 `publisher` varchar(255) NOT NULL,

 `image` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

ALTER TABLE `blog`

 ADD PRIMARY KEY (`id`);

ALTER TABLE `blog`

 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

COMMIT;

 

Sasa hatuwa inayofuata ni kutengeneza html form kwa ajili ya ku post taarifa hizo za hiyo blog yetu.

 

 

<!DOCTYPE html>

<html>

<head>

   <title>Add Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="" method="post" name="Form" enctype="multipart/form-data">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"></textarea><br>

 

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="image"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

 

 

 

Ili kuweza kuboresha sehemu ya kuandika, tunakwenda ku integrate ckey editor kwenye ukurasa wetu. Hii itatusaidi ili kuweza kupata style za uwandishi. Tutatumia CDN ili kuu ganisha, hivyo basi itahitajika tuwe online ili iweze mkufanya kazi vyema.

 

1. Weka javascript code kwenye head yako, tumia link hii <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

 

2. Replace hiyo id ya text area yako na id ya ck editor. Tumia code hizi 

<!DOCTYPE html>

<html>

<head>

   <title>Add Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="post-script.php" method="post" name="Form" enctype="multipart/form-data">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"></textarea><br>

   <script>

       CKEDITOR.replace( 'content' );

   </script>

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="image"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

 

 

Mpaka kufikia hapo tumemaliza upande wa html. Sasa tuingie ku code php. Hakuna tofaiti na code zilizokwisha tangulia. Kumbuka hapa itabidi tuzuie ukubwa wa image isizidi mb 5. Tutatengeneza sasa faili lingine la php ambalo litakwenda kuprocess data zetu na kuziweka kwenye database. Faili hili tutaliita post-script.php

 

  1. post-script.php

<?php

include 'config.php';

$folda = "upload/";

//kujuwa jina la faili

$fileName = $_FILES["myFile"]["name"];

// kujuwa ukiubwa wa faili

$fileSize = $_FILES["myFile"]["size"];

//kujuwa mahala lilipo link yake

$fileLocation = $_FILES["myFile"]["tmp_name"];

//kujuwa aina ya faili

$fileType = $_FILES["myFile"]["type"];

$format = ["jpg", "jpeg", "png"];

//Kujuwa file extension

$fileextension = pathinfo($fileName, PATHINFO_EXTENSION);

 

$title = $_POST['title'];

$summary = $_POST['summary'];

$content = $_POST['content'];

$publisher = $_POST['publisher'];

$date = $_POST['date'];

$image = $fileName;

 

 

 

 

// dhibiti ukubwa wa faili

if ($_FILES["myFile"]["size"] > 5000000) {

   echo "file is too large." . "<br>";

}

if (!in_array($fileextension, $format)){echo 'file is not allowed';

} else {

   if (

   move_uploaded_file(

       $fileLocation,

       $folda .$fileName)

   ) {

 

       $sql="INSERT INTO blog(title, summary, content, post_time, publisher, image) VALUES ('$title', '$summary', '$content', '$date', '$publisher', '$image')";

 

       if (mysqli_query($conn, $sql)) {

           header("location: index.php");

       } else {

           echo "failed";

       }

   } else {

       echo "unsuccessful";

   }

}

?>

 

SASA NI MUDA WA KUANDIKA POST YETU YA KWANZA:

Mpaka kufikia hapo tumemaliza ku code ukurasa wa ku post. Hivyo basi tunakwenda kuandika post yetu mwanzo mwisho. Nitatumia screenshot katika kipengele hiki.

 

Unaweza kutumia code hizi za sql kuingiza data hizo:

 

INSERT INTO `blog` (`id`, `title`, `summary`, `content`, `post_time`, `publisher`, `image`) VALUES

(2, 'ALAMA ZA BARABARANI', 'Posti hii inakwenda kukufundisha kuhusu umuhimu wa kuzingatia alama za barabarani.', '<p><strong>Umuhimu wa alama za barabarani:</strong></p> <p><strong>A</strong>lama za barabarani zinaweza kuwa ni moja ya vitu vitakavyokusaidia kuwa salama ukiwa barabarani.</p> <p>&nbsp;</p> <p>alama za barabarani zitakifanya ujuwe ni wapi pa kupunguza mwendo ama wapi kwenye kona, wapi unaweza ku partk.</p> <p>&nbsp;</p> <p>Alama za barabarani pia zinakuelekeza wapi kuna daraja, kona, hoteli, sheli, sehemu ya mapumziko, gereji na kadhalika.</p> ', '2022-10-10', 'Bongoclass', 'alama za barabarani.jpeg'),

(3, 'taa za barabarani', 'Post hii itakujuza kuhusu taa za bnarabarani', '<p><strong>Taa za barabarani</strong></p> <p>Taa za barabarani zipo tatu ambazo ni:</p> <p>1. njekundu</p> <p>2. njano</p> <p>3. kijani</p> <p>&nbsp;</p> <p>Taa hizi kila moja ina maana na matumizi yake. Kwa mfano rangi nyekundu ina maanisha hatari. rangi hii ikiwaka basi huruhusiwi kuvuka barabara.</p> ', '2022-10-10', 'Bongoclass', 'download.jpg'),

(4, 'mafunzo ya PHP kwa kiswahili', 'haya ni mafunzo ya PHP yanayokujia kw alugha ya kiswahili', '<p>Mafunzo haya yatakwenda kukufundisha kuanzia mwanzo hadi mwisho. Tutajifunza sana kuhusu matumizi ya database kwenye PHP.</p> <p>&nbsp;</p> <p>mafunzo haya pia yatakufundisha jinsi ya kutuma emaili na ku encrypt data . karibu sana kwenye mafunzo haya.</p> ', '2022-10-10', 'Bongoclass', 'php 3 somo la-15.png'),

(5, 'post ya nne ni test post', 'Post hii n i post ya majaribio', '<p>nii ni post ambayo tutakwenda kuitumia tutakapojifunza jinsi ya kufuta taarifa kwenye database.</p> <p>&nbsp;</p> <p>Post hii ni post ya temporary yaani ni post ambayo tutaifuta kwe ye mafunzo yetu haya.</p> ', '2022-10-10', 'Bongoclass', 'IMG_20220512_080622_104.jpg');

 

 

  1. index.php

Katika ukurasa huu ndipo tunakwenda kupata orodha ya data zetu ambazo tayari zipo kwenye database. Jinsi ya kupata data hizi tulisha jifunza kwenye mafunzo ya PHP level 2. Tulijifunza jinsi ya kutumia select kwenye php.

 

Hapa kuna mabo tunatakiwa tujifunze ambayo ndio hasa kiini cha somo hili. Tulishajifunza kwenye masomo yaliotangulia jinsi ya kusafirisha taarifa kwa kutumia POST method. Tumejifunza kuhusu html form inavyosafitisha taarifa.

 

Pia tunajuwa kuwa unapotumia POST method ,kuna usalama kwa kujwa taarifa haziwezi kuon ekana kwenye browser. Sasa hapa leo tutajifunza kuhusu GET method. Hii ni nkjia inayotumika ,kusafirisha taarfifa kwa kupitia URL yaani kwa kujtumia link. 

 

Chukulia mfano kuwa unataka kwa kutumia database uweze kufunfuwa post ambayo id yake ni 100. Sasa hiyo id unawewza kuichukuwa kwenye link.katika ukurasa huu wa index tunaoutengeneza kutakuwa na orodha ya post. Sasa tutasafirisha id ya post ili iweze kutumiwa kwenye ukjurasa wa view.php. 

 

Ili kusafirisha taarifa utaweka link ya hilo faili ambalo taarifa zinakwnda kisha utafuatia alama ya kuuliza yaani ? kisha itaandika jinla la hiyo taarifa unayosafirisha. Jina hili utaweka lolote lile, itafuatia alama ya = kisha utaweka thamani ya hiyo taafifa. Mfano <a href="view.php?id=2">View</a> sasa kwa kuwa sisi hiyo thamani ya id tutahitaji tuipate kwenye post hivyo itatubidi tutu,mie code zilezile za ku fetch data kwenye database hivhyo itasomeka hivi <a href="view.php?id=<?php echo $fetch['id'];?>">View</a>  hivyo hapo link itaonekana hivi http://localhost/web/view.php?id=2 . Pia unaweza kusafirisha taarifa zaidi ya moja kwa kutumia alama ya and yaani & mfano <a href="view.php?id=<?php echo $fetch['id'];?>&publisher=<?php echo $fetch['publisher'];?>">View</a>

Itakupa link hii http://localhost/web/view.php?id=2&publisher=Bongoclass     code nzima zitaonekana hivi:=

 

<!DOCTYPE html>

<html>

<head>

   <title>Blog</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       table, th, td {

           border:1px solid black;

       }

       .dol{

           margin: 0 auto;

           max-width: 70%;

       }

   </style>

</head>

<body>

<table>

<h><a href="post.php">Add post</a></h>

   <th>#</th>

   <th>Image</th>

   <th>Title</th>

   <th>view</th>

   <th>Edit</th>

   <th>delete</th>

   <?php

   include 'config.php';

   $file = mysqli_query($conn, "select * from blog");

   $i = 1;

   while($fetch = mysqli_fetch_array($file)){?>

   <tr>

       <td><?php echo $i++; ?></td>

<td><img src="upload/<?php echo $fetch['image'];?>" width="50"></td>

       <td><?php echo $fetch['title'];?></td>

      <td><a href="view.php?id=<?php echo $fetch['id'];?>">View</a> </td>

       <td><a href="edit.php?id=<?php echo $fetch['id'];?>">Edit</a> </td>

       <td>

           <form method="post" action="delete.php">

               <input type="hidden" name="delete" value="<?php echo $fetch['id'];?>">

               <input type="submit" value="delete" name="submit">

           </form>

 

       </td>

   </tr>

   <?php }; ?>

</table>

</body>

</html>

 

Style.css

 

p{

   margin: 0 auto;

   text-align: left;

   max-width: 70%;

   font-size: 100%;

}

h1{

   font-size: 100%;

   text-align: center;

   max-width: 98%;

}

 

a {text-decoration:none;}

@media screen and (max-width: 600px) {

   img {  width: 100%;    }

}

 

 

  1. view.php

Sasa hapa ndipo tutakwenda kupokea data zilizotumwa kutokw akwenye faili la index.php kwa njia ya GET. tutatengeneza variable kama kawaida, ni kama tunavyofanya kwenye POST ila hapa sasa itakuwa ni GET. data hasa tunayoitaka ni id, maana hapa tunakwenda kusoma post ambayo id yake ni ile ambayo imetumwa. Hivyo tutatengeneza variable kama hivi $id = $_GET['id'];

Ukuras ahuu unakwend akusoma post yetu kuanzia title, summary, content, publisher na date. Kwa kuwa ni post hivyo itatakiw akuwa na kichwa cha hapari ambacho kitaonekana kwenye link. Hivyo tutatumia select kama tulivyojifunz akwenye level 2 mafunzo ya php.

 

Tuta retrive tittle ya post yetu kwa ku echo title, hivyo hivyo tutafanyaq kwenye vipengele vingine.          

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

 

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title><?php echo $fetch['title'];?></title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <meta name="description" content ="<?php echo $fetch['summary'];?>">

   <link rel="stylesheet" href="style.css">

</head>

<body>

<h1><?php echo $fetch['title'];?></h1>

<p><img src="upload/<?php echo $fetch['image'];?>" width="20%"></p>

<p><?php echo $fetch['summary'];?></p>

<p><?php echo $fetch['content'];?></p>

<br><br>

<p><i><b>Imeandikwa na <b style="color: #0aff9c"><?php echo $fetch['publisher'];?></b> Terehe <b style="color: #0a58ca"><?php echo $fetch['post_time'];?></b> </b></i></p>

</body>

</html>

<?php }; ?>

 

 

Edit.php

Hapa sasa ndipo tutakwenda ku edit post yetu. Tutatumia code zile zile tulizotumia kwenye ukurasa wa post.php tofauti ya hapa ni kuwa kwenye input tutakwend akuweka attribute ingine ya value. Attribute hii ndio ambayo inabeba data ambazo tayari zipo, hivyo zitahitajika ku editiwa. Tutazipata data kutoka kwenye databse kw akutumia namna ile ile tuliofanya kwenye ukurasa wa view.php

 

Hapa pia tutatumia GET ili kupata id ya post ambayo in akwenda ku editiwa. Tutatumia id hii kwa ajilo ya kuselect data husika. Pia tutatenegneza ukurasa mwingine kwa ajili ya ku process hizi taarifs. Ukurasa huu tutauita edit-script.php.

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

<!DOCTYPE html>

<html>

<head>

   <title>Edit Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

  &">...



Kama unahitaji kuuliza maswali Bofya hapa





           

Je! umeipenda hii post?
Ndio            Hapana            Save post

Rajabu Tarehe 2024-05-10 14:53:23 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 196


Sponsored links
👉1 Madrasa kiganjani     👉2 Kitau cha Fiqh     👉3 Kitabu cha Afya     👉4 kitabu cha Simulizi    

Post zifazofanana:-

PHP - somo la 40: Jinsi ya kutumia htaccess file kubadilisha muonekano wa link
Katika somo hili uatakwenda kujifunza jinsi ya kutumia htaccess ili kubadili muonekano wa link ya website ama blog ili kuifanya iwe rafiki zaidi. Soma Zaidi...

PHP - somo la 13: Jinsi ya kuunganisha database na website
Katika somo hili utajifunza jinsi ya ku connect database, kwa kutumia php Soma Zaidi...

PHP somo la 72: Jinsi ya kuandaa PDF kutoana na data zilizopo kwenye database
hapa utawenda utuma database wa ajl ya utengeneza maudhu ya PDF. Soma Zaidi...

PHP - somo la 42: Jinsi ya kufanya encryption na de cryption kwa kutumia PHP
Katika somo hili utakwenda kujifunza jinsi ya kufanya encryption na decryption kwa kutumia PHP. hii itakusaidia kuongeza usalama kwenye taarifa za watu Soma Zaidi...

PHP somo la 67: Project ya CUDE operaton wa utuma OOP na PDO
Katika somo hii utakwenda kujifunza jinsi ya kufanya CRUDE operation kwa kutumia PDO. crude operation inahusu create, read, update. Delete. Soma Zaidi...

PHP - somo la 30: Baadhi function za PHP
Katika somo hili utakwenda kujifunza jinsi ya ktumia baadhi ya function za php Soma Zaidi...

PHP - somo la 27: aina za variable kwenye PHP
Katika somo hili utakwenda kujifunza aina kuu 3 za variable katika PHP mabzo ni local variable, global variable na static variable. Soma Zaidi...

PHP somo la 76: Aina za cache header
Katika somo hili utakwenda kujifunza kuhusu Aina za cache header Soma Zaidi...

PHP somo la 66: Jinsi ya ku edit data na kufuta kwenye database kwa kutumia PDO
Katika somo hili utakwenda kujifunza jinsi jinsi ya ku edit ama ku update data na kuzifuta kwenye database kwa kutumia PDO Soma Zaidi...

PHP somola 63: Jinsi ya ku connect database kwa kutumia PDO na faida zake
Katika soo hili utakwenda kujifunza umuhmu wa kutumia PDO kwenye PHP kwa ajili ya kutumia database. Soma Zaidi...

PHP - somo la 14: Jinsi ya kutengeneza database kwa kutumia PHP
Katika somo hili utakwenda kujifunza jinsi ya kutumia PHP kutengeneza database kwenye mysql database. Soma Zaidi...

PHP - somo la 45: Jinsi ya kutuma sms kwa kutumia PHP
Katika soko hili takwenda kujufunza jinsi ya kutuma sms kwa kutumia PHP. Hii itasaidia kama unataka kutuma OTP yaqni Onetime password Soma Zaidi...