前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[CodeIgniter4]讲解-加载静态页

[CodeIgniter4]讲解-加载静态页

作者头像
landv
发布于 2020-03-04 10:57:58
发布于 2020-03-04 10:57:58
4.2K00
代码可运行
举报
文章被收录于专栏:landvlandv
运行总次数:0
代码可运行

讲解

本教程旨在向您介绍CodeIgniter框架和MVC体系结构的基本原理。它将向您展示如何以逐步的方式构造基本的CodeIgniter应用程序。

在本教程中,您将创建一个基本的新闻应用程序。您将从编写可加载静态页面的代码开始。接下来,您将创建一个新闻部分,该部分将从数据库中读取新闻项。最后,您将添加一个表单以在数据库中创建新闻项。

本教程将主要关注:

  • 模型-视图-控制器基础知识
  • 路由基础
  • 表格验证
  • 使用“查询生成器”执行基本数据库查询

整个教程分为几页,每页仅解释CodeIgniter框架功能的一小部分。您将浏览以下页面:

  • 简介,此页面为您提供了预期的概述。
  • 静态页面,它将教您控制器,视图和路由的基础知识。
  • 新闻部分,您将在这里开始使用模型,并将进行一些基本的数据库操作。
  • 创建新闻项,这将引入更高级的数据库操作和表单验证。
  • 结论,这将为您提供进一步阅读和其他资源的一些指示。

享受您对CodeIgniter框架的探索。

加载静态页

Note: 本教程假设你已经下载好 CodeIgniter,并将其 安装 到你的开发环境。

首先你需要新建一个 控制器 来处理静态页。控制器就是用来帮助你完成工作的一个简单的类,它是你整个 Web 应用程序的"粘合剂"。

CI3 需要$this->load->view 现在CI4 view('welcome_message');即可

例如,当访问下面这个 URL 时:

http://example.com/news/latest/10

根据此 URL 我们可以推测出有一个名称为 "news" 的控制器,被调用的方法为 "latest","latest" 方法的作用应该是查询10条新闻条目并展示在页面上。 在MVC模式里,你会经常看到下面格式的 URL:

http://example.com/[controller-class]/[controller-method]/[arguments]

在正式环境下 URL 的格式可能会更复杂,但现在,我们只需要知道这些就够了。

新建一个文件 application/Controllers/Pages.php,然后添加如下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?php
class Pages extends CodeIgniter\Controller {

        public function view($page = 'home')
        {
    }
}

你刚创建了一个 Pages 类,有一个方法 view 并可接受一个 $page 的参数。Pages 类继承自 CodeIgniter\Controller 类,这意味着它可以访问 CodeIgniter\Controller 类 (system/Controller.php) 中定义的方法和变量。

控制器将是你 Web 应用程序中处理请求的核心。和其他的 PHP 类一样,可以在你的控制器中使用 $this 来访问它。

现在,你已经创建了你的第一个方法,是时候创建一些基本的页面模板了。我们将新建两个 "views" (页面模板) 分别作为我们的页头和页脚。

新建页头文件 application/Views/Templates/Header.php 并添加以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!doctype html>
<html>
<head>
        <title>CodeIgniter Tutorial</title>
</head>
<body>

        <h1><?= $title; ?></h1>

页头包含了一些基本的 HTML 代码,用于展示页面主视图之前的内容。同时,它还打印出了 $title 变量,这个我们之后讲控制器的时候再细说。 现在,再新建个页脚文件 application/Views/Templates/Footer.php,然后添加以下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                <em>&copy; 2016</em>
        </body>
</html>

在控制器中添加逻辑

你刚新建的控制器中有一个 view() 方法,这个方法可接受一个用于指定要加载页面的参数。静态页面的模板目录为:application/Views/Pages/

在该目录中,新建 Home.php 和 About.php 模板文件。在每个文件中任意输入一些文本然后保存它们。如果你不知道写什么,那就写 "Hello World!" 吧。

为了加载这些界面,你需要检查下请求的页面是否存在:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public function view($page = 'home')
{
    if ( ! file_exists(APPPATH.'/Views/Pages/'.$page.'.php'))
        {
                // Whoops, we don't have a page for that!
                throw new \CodeIgniter\PageNotFoundException($page);
        }

        $data['title'] = ucfirst($page); // Capitalize the first letter

        echo view('Templates/Header', $data);
        echo view('Pages/'.$page, $data);
        echo view('Templates/Footer', $data);
}

当请求的页面存在时,将给用户加载并展示出一个包含页头页脚的页面。如果不存在,会显示 "404 Page not found" 的错误页面。

此事例方法中,第一行用以检查界面是否存在,file_exists() 是原生的 PHP 函数,用于检查某个文件是否存在。PageNotFoundException 是 CodeIgniter 的内置函数,用来展示默认的错误页面。

在页头模板文件中,$title 变量代表页面的自定义标题,它是在方法中被赋值的,但并不是直接赋值给 title 变量,而是赋值给 $data 数组中的 title 元素。

最后要做的就是按顺序加载所需的视图,view() 方法中的参数代表要展示的视图文件名称。$data 数组中的每一个元素将被赋值给一个变量,这个变量的名字就是数组的键值。所以控制器中 $data['title'] 的值,就等于视图中 $title 的值。

路由

控制器已经开始工作了!在你的浏览器中输入 [your-site-url]index.php/pages/view 来查看你的页面。当你访问 index.php/pages/view/about 时你将看到包含页头和页脚的 about 页面。

使用自定义的路由规则,你可以将任意的 URL 映射到任意的控制器和方法上,从而打破默认的规则: http://example.com/[controller-class]/[controller-method]/[arguments]

让我们来试试。打开路由文件 application/Config/Routes.php 然后添加如下两行代码,并删除掉其它对 $route 数组赋值的代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$routes->setDefaultController('Pages/view');
$routes->add('(:any)', 'Pages::view/$1');

CodeIgniter 读取路由的规则为从上到下,并将请求映射到第一个匹配的规则。每个规则都是一个正则表达式(左侧)映射到一个控制器和方法(右侧)。当获取到请求时,CodeIgniter 首先查找能匹配到的第一条规则,然后调用相应的可能存在参数的控制器和方法。

你可以在关于 URL路由的文档 中找到更多信息。

路由事例的第二条规则 $routes 数组中使用了通配符 (:any) 来匹配所有的请求,然后将参数传递给 Pages 类的 view() 方法。

为请求默认的控制器,你必须确定当前路由未被定义或重新编写过。默认的路由文件 does 下存在一个处理网站根目录的路由 (/) 规则.删除以下的路由来确保 Pages 控制器可以访问到我们的 home 页面:

$routes->add('/', 'Home::index');

现在访问 index.php/about。路由规则是不是正确的将你带到了控制器中的 view() 方法?太酷了!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-02-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
gif 格式
请看图片,gif 图分为图片文件头(File Header),gif信息(GIF Data Stream)和文件结尾(Trailer)三个部分,最主要的是 gif 信息。gif信息是由控制块(Control Block)和数据块(Data Sub-blocks)组成的。
林德熙
2018/09/19
2.3K0
gif 格式
利用Android系统源码中giflib实现播放gif文件
目前市场上流行的图片框架都是可以很好的处理gif图片,像glide是通过Java层来处理gif的展示,但是Java层来处gif的展示,始终会存在OOM的风险。今天学习了一下Android系统源码中拓展源码的giflib加载gif。
包子388321
2020/07/01
2.1K0
GIF简述及其在QQ音乐的应用
QQ音乐技术团队
2017/09/30
2.2K0
GIF简述及其在QQ音乐的应用
你真的了解 gif 吗?分析 gif 文件和一些奇怪的 gif 特性
是的,我指的是主流的,遍布全网的普通 gif,谷歌旗下的 Tenor 或 Facebook 旗下的 giphy 这样的网站到处都是这种 gif。Gif 是所有人都喜欢的,用来分享简短动画片断的文件格式。
winty
2022/04/08
1.5K0
你真的了解 gif 吗?分析 gif 文件和一些奇怪的 gif 特性
GIF格式解析
前言 本文参考gif 格式图片详细解析。加入了一些自己的理解和解析方面的示例。 ---- GIF格式解析 图像互换格式(GIF,Graphics Interchange Format)是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。 图像互换格式主要分为两个版本,即图像互换格式87a和图像互换格式89a。 图像互换格式87a:是在1987年制定的版本。
Oceanlong
2018/07/03
6.4K0
庖丁解牛:GIF
该文介绍了GIF动画的基本原理、GIF文件的格式、GIF的编码方式以及GIF的帧格式。GIF是一种无损压缩的8位图像文件格式,常用于网络上的图片存储和传输。GIF格式支持灰度图像和彩色图像,但不支持Alpha通道。GIF格式采用Lempel-Zev-Welch(LZW)压缩算法进行压缩,该算法是一种无损压缩算法,能够在保证图像质量的同时有效地减小文件大小。GIF格式还支持调色板、透明区域、渐进式显示、动画等特性。
郭艺帆
2017/09/01
1.7K0
庖丁解牛:GIF
常见图片文件格式简析下载_图片的文件格式有哪些
bmp文件头(bmp file header):14Byte。提供文件的格式、大小等信息 。
全栈程序员站长
2022/09/20
1.3K0
基于STM32设计的数码相册
项目是基于STM32设计的数码相册,能够通过LCD显示屏解码显示主流的图片,支持bmp、jpg、gif等格式。用户可以通过按键或者触摸屏来切换图片,同时还可以旋转显示,并能够自适应居中显示,小尺寸图片居中显示,大尺寸图片自动缩小显示(超出屏幕范围)。图片从SD卡中获取。
DS小龙哥
2023/08/02
3730
基于STM32设计的数码相册
js玩转APNG -- 逆转火狐
APNG是一种常见的网页动画,兼容性较好,交互性差,要想对其进行深入了解,则要了解其文件格式。本文以一个具体的问题为例,带你深入了解APNG的格式。
IMWeb前端团队
2019/12/13
2.4K0
js玩转APNG -- 逆转火狐
舞动的表情包——浅析GIF格式图片的存储和压缩
导语 GIF(Graphics Interchange Format)原义是“图像互换格式”,是CompuServe公司在1987年开发出的图像文件格式,可以说是互联网界的老古董了。 GIF格式可以存储多幅彩色图像,如果将这些图像连续播放出来,就能够组成最简单的动画。所以常被用来存储“动态图片”,通常时间短,体积小,内容简单,成像相对清晰,适于在早起的慢速互联网上传播。 本来,随着网络带宽的拓展和视频技术的进步,这种图像已经渐渐失去了市场。可是,近年来流行的表情包文化,让老古董GIF图有了新的用武之地。
腾讯Bugly
2018/03/23
2.1K0
硬核APNG实践 -- 逆转火狐
APNG是一种常见的网页动画,兼容性良好(可惜微信不兼容,本文动图以gif代替),交互性差,要想对其进行深入了解,则要了解其文件格式。本文以一个具体的问题为例,带你深入了解APNG的格式。 带着问题学习 -- 逆转火狐 先上问题:有一张火狐logo的图片,原图是顺时针旋转的,我们怎么来把它改为逆时针旋转呢?(微信公众号自动压缩图片。这里以gif作为演示,可点击文章底部“阅读原文”查看apng效果) 动画的基本原理 帧动画的基本原理是这样的,事先准备若干张静态图片(关键帧),每张图片之间有细微的差异,在
用户1097444
2022/06/29
1K0
硬核APNG实践 -- 逆转火狐
浓缩的才是精华:浅析 GIF 格式图片的存储和压缩
该文章介绍了如何通过Guetzli算法对图片进行压缩,节省存储空间,同时又不损失太多图片质量。文章首先介绍了图片压缩的背景和意义,然后详细讲解了Guetzli算法的原理和实现,最后列举了一些应用场景和案例。
WendyGrandOrder
2017/03/30
12.2K3
浓缩的才是精华:浅析 GIF 格式图片的存储和压缩
OpenHarmony轻松玩转GIF数据渲染
OpenAtom OpenHarmony(以下简称“OpenHarmony”)提供了Image组件支持GIF动图的播放,但是缺乏扩展能力,不支持播放控制等。今天介绍一款三方库——ohos-gif-drawable三方组件,带大家一起玩转GIF的数据渲染,搞定GIF动图的各种需求。
小帅聊鸿蒙
2025/04/22
720
OpenHarmony轻松玩转GIF数据渲染
万字长文带你学习【前端开发中的二进制数据】| 技术创作特训营第五期
在现代前端开发中,处理二进制数据变得越来越重要。从图像、音频到文件上传,这些数据类型常常以二进制形式存在。这个分享将带你深入探索 ArrayBuffer、Blob、File 以及流(Stream)等概念,探讨它们如何在前端开发中发挥作用,解锁了解和利用二进制数据的强大能力。
程序员库里
2024/01/24
7720
Android终端上视频转GIF的实现及GIF质量讨论
在生成 GIF 的过程中,最关键的步骤就是生成调色板以及像素到调色板的映射关系。
天天P图攻城狮
2018/02/02
3.8K0
Android终端上视频转GIF的实现及GIF质量讨论
文件上传杂谈
文件上传是前端很常见的一类场景。图片、视频和文档等等都属于文件范畴,每个文件则是通过 File.Type 进行更细的划分。本文将针对文件上传的一些通用维度场景做简单的剖析和尝试,抛砖引玉,希望共同学习,共同成长。
有赞coder
2021/01/18
1.6K0
文件上传杂谈
NDK--实现gif图片播放
部分Gif图片不能自适应大小, 播放速度比实际播放速度快, 如果要显示的gif过大,还会出现OOM的问题。
aruba
2020/07/02
1.5K0
js操作二进制数据
使用ArrayBuffer对象保存二进制数据,使用TypedArray和DataView 视图来读写数据。
风花一世月
2024/03/19
3160
js操作二进制数据
ArrayBuffer
ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口。这些对象早就存在,属于独立的规格(2011 年 2 月发布),ES6 将它们纳入了 ECMAScript 规格,并且增加了新的方法。它们都是以数组的语法处理二进制数据,所以统称为二进制数组。 这个接口的原始设计目的,与 WebGL 项目有关。所谓 WebGL,就是指浏览器与显卡之间的通信接口,为了满足 JavaScript 与显卡之间大量的、实时的数据交换,它们之间的数据通信必须是二进制的,而不能是传统的文本格式。文本格式传递一个 32 位整数,两端的 JavaScript 脚本与显卡都要进行格式转化,将非常耗时。这时要是存在一种机制,可以像 C 语言那样,直接操作字节,将 4 个字节的 32 位整数,以二进制形式原封不动地送入显卡,脚本的性能就会大幅提升。
小小杰啊
2022/12/21
2.6K0
WebP原理和Android支持现状介绍
1.背景 目前网络中图片仍然是占用流量较大的一部分,对于移动端更是如此,因此,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要。 然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致,因此Google于2010年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能。 WebP为网络图片提供了无损和有损压缩能力,同时在有损条件下支持透明通道。据官方实验显示:无损WebP相比PNG减少26%大小;有损WebP在相同的SSIM(Structural Simi
腾讯Bugly
2018/03/23
4.6K0
推荐阅读
相关推荐
gif 格式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验