如何在没有命令行的情况下安装 CakePHP 3、Bootstrap 和 Bootflat (cPanel)

Question

这与其说是个问题，不如说是我为使 CakePHP 3、Bootstrap 和 Bootflat 风格在一个运行 cPanel 而没有 SSH 访问权限的共享主机环境上工作所做的一系列笔记。这可能不是最好的方法（也许人们可以提出改进建议？），但它对我有用。

是的，我可以（并且最初确实）使用 composer 在本地开发机器上完成所有这些工作，但这本身就是一项任务（MAMP 没有本机 intl，其安装过程需要 xCode，它退出了快速控制），所以我想弄清楚如何在不需要这样做的情况下让一切正常工作。

Answer 1

初始设置

1. 在 cPanel 上创建域并检查它是否有效（例如，您会在 http://yourcpanelhost.com/~username/ 获得目录列表）
2. 使用 cpanel 创建包含应用程序的子文件夹或子域（例如 http://yourcpanelhost.com/~username/app）
3. 下载要使用的版本（例如https://github.com/cakephp/cakephp/archive/3.1.5.zip）并在本地机器上解压（确保下载的是存档版本，而不是“版本”。存档版本包含 webroot 目录、index.php 和zip 文件中没有发布的其他重要文件。）
4. 使用 FTP（例如 FileZilla），将 zip 文件的内容上传到您之前创建的应用目录中
5. 尝试该站点，但您可能会收到错误 500 服务器错误
6. 如果出现错误，请在 cPanel 中单击“选择 PHP 版本”并将其更改为 5.6 并启用 intl 扩展，然后单击保存。
7. 到现在为止，该站点现在应该会向您发送一条消息，告诉您 cake 正在运行，但您会收到无法连接到数据库的错误消息
8. 在 cPanel 中单击 MySQL 数据库并创建一个数据库和对该数据库具有完全访问权限的用户
9. 使用 FTP 兼容的文本编辑器（例如 TextWrangler、Notepad++）登录 FTP 站点并编辑文件 config/app.php（位于您之前创建的目录中）。在该文件中，找到数据库部分并根据上一步中的信息替换用户名、密码和数据库字段。该网站现在应该可以正常加载了。
10. 以安全的名义，现在是使用文本编辑器调整 config/app.php 中的盐值的好时机，并使用一个新的随机生成的值（例如来自 http://www.sethcardoza.com/tools/random-password-generator/）。

让引导程序工作

11. 下载并解压 CakePHP 3 的 bootstrap-ui 版本（例如 https://github.com/FriendsOfCake/bootstrap-ui/archive/v0.3.2.zip），解压并将内容 FTP 到插件目录 plugins/BootstrapUI/ 中名为 BootstrapUI 的新目录（请注意，此目录的大小写为重要的）。请注意，自动安装的插件通常会进入供应商目录，我们不会这样做，因为我们是手动安装插件。
12. 将此行添加到 core/bootstrap.php（请注意，名为 bootstrap.php 的配置文件和名为 bootstrap 的插件只是巧合）：Plugin::load('BootstrapUI', ['autoload' => true]);

13. 编辑文件 src/View/AppView.php 以包含以下内容（在类定义之前留下任何命名空间或使用说明）：

    class AppView extends View
    {
        public $layout = 'BootstrapUI.default';
    
        public function initialize()
        {
            $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
            $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
            $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
            $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
        }
    }
    

14. 使用您的 FTP 程序，将 plugins/bootstrap-ui/src/Template/Layout/examples 中的文件（或直接从解压缩的 zip 上传）复制到新目录 src/Template/Layout/TwitterBootstrap
15. 现在我们需要安装引导资产。下载并解压引导发行版（例如https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip）
16. 使用 FTP，在 app/webroot/css 创建一个名为 bootstrap 的目录并从 bootstrap zip 的 css 目录上传文件
17. 在 app/webroot/css 创建一个名为 fonts 的目录并从 zip 的 fonts 目录上传文件（注意 fonts 目录直接在 css 目录中，而不是 css/bootstrap 子目录）
18. 在 app/webroot/js 创建一个名为 bootstrap 的目录并从 bootstrap zip 的 js 目录上传文件
19. 现在我们需要 jquery。下载并添加 jquery 文件（例如 http://code.jquery.com/jquery-2.1.4.js 和 http://code.jquery.com/jquery-2.1.4.min.js）并将它们上传到新目录 app/webroot/js/jquery
20. 此时，您现在可以创建数据库表、实体文件、表文件、控制器文件和模板文件，并且您可以在视图中使用引导 css 元素。但是，很少有关于 bootstrap-ui 项目的文档，说明如何最好地格式化模板。为此，“烘焙”模板最适合制作必要的文件，但需要命令行（您没有命令行，这就是您阅读这篇文章的原因）。为了您的利益，基于一个名为“users”的虚拟表（其中包含一个 id、一个电子邮件地址和一个密码字段），我将把这篇文章链接到一些您可以上传的预烘焙实体、表、控制器和模板文件.
21. 您现在应该有一个非常简单的创建、读取、更新和删除 (CRUD) 应用程序，它使用漂亮的引导界面元素。

让 Bootflat 工作

22. 现在是应用 bootflat 样式的问题。首先下载 bootflat 框架（例如https://github.com/bootflat/bootflat.github.io/archive/master.zip），解压，然后将 bootflat/bootflat/css 中的文件上传到新目录 webroot/css/bootflat （注意要上传的正确文件在 zip 和被称为 bootflat.css、bootflat.css.map 和 bootflat.min.css，而不是包含 site.css 等的 zip 根目录中的 css 目录）
23. 为了让 bootflat.css 文件覆盖 bootstrap.css 的必要样式，我们需要调整 bootstrap 插件目录中的默认布局 - 但修改插件文件目录不是一个好主意。所以首先，使用 FTP 将文件 plugins/BootstrapUI/src/Template/Layout/default.ctp 复制到一个新目录 src/Template/Layout/Bootflat/default.ctp
24. 现在编辑 src/View/AppView.php 并将 $layout 行更改为 public $layout = 'Bootflat/default'; 以便 CakePHP 使用 src 版本而不是插件版本（当前具有相同的内容）
25. 您的 CRUD 应用程序应该仍然可以工作，但看起来没有什么不同
26. 现在在文件 src/Template/Layout/Bootflat/default.ctp 中找到 $this->prepend('css', $this->Html->css(['bootstrap/bootstrap'])); 的行，在该行之前插入行 $this->prepend('css', $this->Html->css(['bootflat/bootflat']));
27. CRUD 应用程序的配色方案现在应该（稍微）改变，并且您现在可以使用所有 bootflat UI 元素（例如，http://bootflat.github.io/documentation.html 此处的元素）

奖金

28. Bootstrap 和 bootflat 假设您可以直接控制插入必要的 <span> 元素等以构成它们的 UI 元素，但这在 Cake 中可能会很棘手。有很多方法可以得到你想要的，但它可能需要一些搜索。根据Input wrapper div class in CakePHP 3.0.0这个帖子，我发现你可以将FlatUI的货币输入如下（将此代码插入到密码输入框下方的src/Templates/Users/add.ctp）：

    echo $this->Form->input('amount', [
        'templates' => [
            'inputContainer' => '<div class="input-group form-group {{type}}{{required}}"><span class="input-group-addon">$</span>{{content}}<span class="input-group-addon">.00</span></div>',
            'inputContainerError' => '<div class="input-group form-group {{type}}{{required}} error"><span class="input-group-addon">$</span>{{content}}{{error}}<span class="input-group-addon">.00</span></div>'
        ],
        'class' => 'form-control',
        'label' => false,
        'placeholder' => 'Amount',
    ]);
    

注意事项

• 是的，我完全知道我有一个明文密码字段 - 这不是故意的，我只是想看看默认情况下如何处理烘焙密码字段。
• bootflat 的配色方案与 bootstrap 没有太大区别，我尝试的所有 UI 元素（例如上面的货币框）在没有 bootflat 的情况下也能正常工作，但它们只是以不同的颜色显示
• 您可以使用其他布局而不是仪表板作为视图的基础。尝试编辑 add.ctp 并让它使用登录布局基础
• 当屏幕宽度足够小时，菜单项（由模板文件中的 $this->start('tb_actions'); 定义）将自动折叠成菜单图标

烘焙文件

src/Model/Entity/User.php
https://gist.github.com/anonymous/dfe97533f9160b2911a0

src/Model/UsersTable.php
https://gist.github.com/anonymous/d532e1bd218a503b7f44

src/Controller/UsersController.php
https://gist.github.com/anonymous/170b8e58ffa8ecbf11f8

src/Template/Users/add.ctp
https://gist.github.com/anonymous/c6d4758536649d7ca0fb

src/Template/Users/edit.ctp
https://gist.github.com/anonymous/9d689278b030018dc114

src/Template/Users/index.ctp
https://gist.github.com/anonymous/fb0a5cea07c3ea3df062

src/Template/Users/view.ctp
https://gist.github.com/anonymous/cbfb8de8b93d6e59ecfc