Thứ Năm, 23 tháng 6, 2016

Phần 37 - Làm phần thoát trang quản trị và làm phần xuất biểu mẫu thêm menu ngang

- Tiếp theo là làm tiếp phần thoát trang quản trị.Bạn tạo file 'thoat.php' trong thư mục 'quan_tri_2' với nội dung sau :


<?php
    if(!isset($bien_bao_mat)){exit();}
?>
<?php
    unset($_SESSION['ky_danh']);
    unset($_SESSION['mat_khau']);
?>

- File này sẽ dùng hàm unset để xóa đi session 'ky_danh' và session 'mat_khau'.Khi 2 session này mất đi (tức là không còn tồn tại) thì khi web tải lại , web sẽ tải lại file 'xac_dinh_danh_nhap.php' và không tạo biến $xac_dinh_dang_nhap (do không tồn tại biến session 'ky_danh' ) => web sẽ hiển thị lại phần đăng nhập quản trị

- Ở đây mình nói thêm 1 chút , khi bạn nhấn vào chữ "Thoát" thì web sẽ chạy đến url là ?thamso=thoat , khi đó web sẽ tải lại file 'xu_ly_post_get.php' , mà tại file  này thì có đoạn code :

if(isset($_GET['thamso']))
{
    if($_GET['thamso']=="thoat")
    {
        include("chuc_nang/quan_tri_2/thoat.php");
        trang_truoc_html();
    }
}

- Đoạn code này sẽ gọi file 'thoat.php' khi mà bạn bấm vào chữ 'Thoát' (do url hiện tại có biến $_GET['thamso'] và biến này có giá trị là 'thoat' ) , rồi từ đó xóa session 'ky_danh' và session 'mat_khau' và sau đó web sẽ quay trở về trang trước => dẫn đến web không khai báo biến $xac_dinh_dang_nhap (do không tồn tại session 'ky_danh' )=> web sẽ hiển thị lại khung đăng nhập (nghĩa là  đã đăng xuất khỏi trang quản trị )

- Tiếp theo là làm phần thêm menu ngang , bạn tạo thư mục 'phan_bo_tro' trong thư mục 'quan_tri' rồi sao chép thư mục 'tinymce' trong file đính kèm vào thư mục phần bổ trợ (tinymce không phải do mình tạo ra mà mình tìm thấy từ mạng internet , để biết thêm thông tin về tinymce thì bạn vào google rồi đánh vào chữ 'tinymce' rồi tìm thông tin) ; tinymce dùng để tạo khung nhập liệu văn bản

- Bản tinymce mình dùng khi viết phần hướng dẫn này chưa có sẳn phần tải hình ảnh  nên cần có thêm plugin để tải hình ảnh.Bạn sao chép thư mục 'justboil.me-master' trong file đính kèm vào thư mục 'plugins' của thư mục 'tinymce' mới sao chép (đường dẫn 'ban_hang/quan_tri/phan_bo_tro/tinymce/js/tinymce/plugins' ) , sau đó bạn đổi tên thư mục 'justboil.me-master' thành 'jbimages'.Lưu ý là phần code đó (code này là 1 plugin ) cũng không phải của mình , để biết thêm thông tin về phần code đó thì bạn vào google đánh vào chữ 'justboil.me images plugin TinyMCE' rồi tìm thông tin

- Tiếp theo bạn sửa lại đường dẫn tải ảnh của tinymce , bạn sửa dòng code $config['img_path'] = '/images'; // Relative to domain name trong file 'config.php' (đường dẫn 'ban_hang/quan_tri/phan_bo_tro/tinymce/js/tinymce/plugins/jbimages' ) thành :

$file_hien_tai=$_SERVER['REQUEST_URI'];
$m=explode("/",$file_hien_tai);
$thu_muc_tai_anh="/".$m[1]."/hinh_anh/tinymce";
$config['img_path'] = $thu_muc_tai_anh; 

- Sau đó bạn tạo thư mục 'tinymce' trong thư mục 'hinh_anh' , ảnh tải lên từ khung nhập liệu tinymce sẽ vào thư mục này.Với đoạn code trên thì biến $duong_dan_anh sẽ có giá trị là '/ban_hang/hinh_anh/tinymce'

- Bạn xem giải thích của đoạn code trên (phần chữ xanh) ở phần bên dưới :

$file_hien_tai=$_SERVER['REQUEST_URI'];
// $_SERVER['REQUEST_URI'] dùng để lấy tên liên kết web đang chạy (không tính tên miền , ở đây là không tính phần http://localhost )

$m=explode("/",$file_hien_tai);
// phân tách tên liên kết web đang chạy (không tính tên miền) thông qua dấu '/' để tìm thư mục chứa code của trang web
// thành phần thứ 2 ( $m[1] ) trong mảng $m chính là thư mục chứa code của trang web , ở đây sẽ là thư mục 'ban_hang'
$thu_muc_tai_anh="/".$m[1]."/hinh_anh/tinymce";
// khai báo thư mục tải ảnh , thư mục này sẽ là thư mục 'tinymce' trong thư mục 'hinh_anh'
// cả 2 thư mục 'tinymce' và 'hinh_anh' đều nằm trong thư mục chứa code của trang web , ở đây sẽ là thư mục 'ban_hang'
// sở dĩ làm vậy vì khi sử dụng web đôi khi sẽ đổi tên thư mục , chẳng hạn như đổi là 'ban_hang_348' chứ không phải là giữ lại tên 'ban_hang'
// => viết code như vậy để tránh sai đường dẫn ảnh tinymce khi đổi đường dẫn web
$config['img_path'] =$thu_muc_tai_anh; // gán thư mục tải ảnh vào $config['img_path']


- Bạn tạo thư mục 'menu_ngang' trong thư mục 'quan_tri/chuc_nang' , sau đó tạo file 'them_menu_ngang.php' trong thư mục 'menu_ngang' với nội dung sau :

<?php
    if(!isset($bien_bao_mat)){exit();}
?>
<form action="" method="post">
    <table width="990px" >
        <tr>
            <td colspan="2" ><b style="color:blue;font-size:20px" >Thêm menu ngang</b><br><br> </td>
           
        </tr>
        <tr>
            <td width="150px" >Tên : </td>
            <td width="840px">
                <input style="width:400px;margin-top:3px;margin-bottom:3px;" name="ten" value="" >
            </td>
        </tr>
        <tr>
            <td>Loại menu : </td>
            <td>
                <?php
                    $a_1="";
                    $a_2="";
                    if(isset($_SESSION['loai_menu_wr8']))
                    {
                        if($_SESSION['loai_menu_wr8']=="san_pham")
                        {
                            $a_2="selected";
                        }
                    }
                ?>
                <select name="loai_menu" style="margin-top:3px;margin-bottom:3px;" >
                    <option value="" <?php echo $a_1; ?> >Bình thường</option>
                    <option value="san_pham" <?php echo $a_2; ?> >Sản phẩm</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Nội dung : </td>
            <td>
                <script type="text/javascript">
                  tinymce.init({
                    selector: '#noi_dung',
                    theme: 'modern',
                    width: 800,
                    height: 300,
                    plugins: [
                      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                      'save table contextmenu directionality emoticons template paste textcolor jbimages'
                    ],
                    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons jbimages',
                    relative_urls: false
                  });
                 
                  </script>
                  <textarea id="noi_dung" name="noi_dung" ></textarea>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <br>
                <input type="submit" name="bieu_mau_them_menu_ngang" value="Thêm menu" style="width:200px;height:50px;font-size:24px" >
            </td>
        </tr>
    </table>
</form>

- Sau đó tại file 'quan_tri/index.php' , bạn thêm dòng code sau phía sau dòng code <title>Quản trị</title> :

<script src='phan_bo_tro/tinymce/js/tinymce/tinymce.min.js'></script>

- Dòng code này là liên kết tới phần code của tinymce (nếu không có sẽ không sử dụng tinymce được).Bạn xem giải thích code (phần chữ xanh) của file 'them_menu_ngang.php'  ở phía dưới

<?php
    if(!isset($bien_bao_mat)){exit();} // xuất ra trang trắng nếu truy cập trực tiếp vào file này
?>
<form action="" method="post">     <table width="990px" >
        <tr>
            <td colspan="2" ><b style="color:blue;font-size:20px" >Thêm menu ngang</b><br><br> </td>
            // xuất tiêu đề màu xanh và kích cỡ chữ 20px
        </tr>
        <tr>
            <td width="150px" >Tên : </td>
            <td width="840px">
                <input style="width:400px;margin-top:3px;margin-bottom:3px;" name="ten" value="" >
                // xuất khung nhập liệu tên ; khung này cách trên cách dưới 3px (margin-top,margin-bottom) và rộng 400px (width)
                // lưu ý khung này có name là 'ten' => khi lấy dữ liệu từ khung này bằng mã php thì viết là $_POST['ten']
                // (biểu mẫu hiện tại dùng phương thức post (thuộc tính method) nên khi lấy dữ liệu thì dùng $_POST )
            </td>
        </tr>
        <tr>
            <td>Loại menu : </td>
            <td>
                <?php
                    $a_1="";
                    $a_2="";
                    // 2 biến $a_1 và $a_2 là nhằm xác định loại menu nào được chọn trước ,vì mình muốn sau khi thêm menu thì web sẽ giữ lại phần
                    // loại menu được chọn trước đó  nên làm phần  code này.Sau khi thêm menu thì mình sẽ tạo ra session 'loai_menu_wr8' chứa
                    // giá trị của  menu được chọn ,  trường hợp menu sản phẩm được chọn là khi biến session 'loai_menu_wr8'
                    // có giá trị là 'san_pham'
                    if(isset($_SESSION['loai_menu_wr8'])) // nếu có tồn tại biến session 'loai_menu_wr8'
                    {
                        if($_SESSION['loai_menu_wr8']=="san_pham") // nếu biến session 'loai_menu_wr8' có giá trị là 'san_pham'
                        {
                            $a_2="selected";
                            // khi biến session 'loai_menu_wr8' thì biến $a_2 sẽ có giá trị 'selected'
                            // Bạn để ý 2 thẻ option phía dưới mình có xuất biến $a_1 và $a_2
                            // Thẻ option nào có ghi 'selected' thì thẻ option đó sẽ được chọn trong thẻ select
                            //  (nghĩa là tùy chọn option đó sẽ được chọn trước)
                            // biến $a_1 được xuất vào loại menu 'Bình thường' , biến $a_2 được xuất vào loại menu 'Sản phẩm'
                        }
                    }
                ?>
                <select name="loai_menu" style="margin-top:3px;margin-bottom:3px;" >
                // xuất hộp tùy chọn select với name là 'loai_menu' (hộp này cũng cách trên , cách dưới 3px)
                // khi lấy dữ liệu từ hộp này thì viết là $_POST['loai_menu']
                    <option value="" <?php echo $a_1; ?> >Bình thường</option> // cho biến $a_1 vào tùy chọn 'Bình thường'
                    <option value="san_pham" <?php echo $a_2; ?> >Sản phẩm</option> // cho biến $a_2 vào tùy chọn 'Sản phẩm'
                </select>
            </td>
        </tr>
        <tr>
            <td>Nội dung : </td>
            <td>
                <script type="text/javascript">
                  tinymce.init({ // thực hiện mã tùy chỉnh khung nhập liệu tinymce
                    selector: '#noi_dung', // hộp nhập liệu này áp dụng đối với phần tử textarea có id là 'noi_dung'
                    theme: 'modern',
                    width: 800, // chiều rộng 800px
                    height: 300, // chiều cao 300px
                    plugins: [ // các plugin được thêm vào khung nhập liệu tinymce này , để ý có plugin jbimages (dùng để tải ảnh)
                      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                      'save table contextmenu directionality emoticons template paste textcolor jbimages'
                    ],
                    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons jbimages',
                    // hiển thị các thành phần của khung nhập liệu tinymce , để ý sẽ thấy có jbimages
                    relative_urls: false
                  });
                 
                  </script>
                  <textarea id="noi_dung" name="noi_dung" ></textarea>
                  // đây là khung nhập liệu tinymce , thẻ textarea này được thay thế thành khung nhập liệu tinymce vì  thẻ textarea này có id là                           // 'noi_dung' ; phần tùy chỉnh phía trên đã nói rằng textarea có id là 'noi_dung' chính là khung nhập liệu tinymce
                  // thẻ textarea này có name là 'noi_dung' nên khi lấy dữ liệu khung này thì viết là $_POST['noi_dung']
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <br>
                <input type="submit" name="bieu_mau_them_menu_ngang" value="Thêm menu" style="width:200px;height:50px;font-size:24px" >
                // tạo nút gửi biểu mẫu thêm menu ngang với name là 'bieu_mau_them_menu_ngang'
                // trong file 'xu_ly_post_get.php' sẽ dùng phần name này
                // để xác định biểu mẫu có được gửi hay không ( isset($_POST['bieu_mau_them_menu_ngang']) )
                // định dạng css của nút này (thuộc tính style) là : rộng 200px , cao 50px , kích cỡ chữ 24px
            </td>
        </tr>
    </table>
</form>

- Mình đăng nhập quản trị rồi bấm vào liên kết 'Thêm menu ngang' thì nhận được kết quả sau :



 - Khi mình bấm vào liên kết thêm menu ngang (ở file 'trang_chu_2.php' ) => web sẽ đến trang ?thamso=them_menu_ngang , web sẽ tải file 'dieu_huong.php' và  gọi file 'them_menu_ngang.php' bằng đoạn code sau :


case "them_menu_ngang":
    include("chuc_nang/menu_ngang/them_menu_ngang.php");
break;

- Từ đó sẽ xuất ra biểu mẫu thêm menu ngang