This repository has been archived by the owner on May 27, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
expressionengine-fundamentals.html
224 lines (212 loc) · 12.4 KB
/
expressionengine-fundamentals.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>ExpressionEngine Fundamentals - </title>
<style type="text/css">code{white-space: pre;}</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; }
code > span.dt { color: #902000; }
code > span.dv { color: #40a070; }
code > span.bn { color: #40a070; }
code > span.fl { color: #40a070; }
code > span.ch { color: #4070a0; }
code > span.st { color: #4070a0; }
code > span.co { color: #60a0b0; font-style: italic; }
code > span.ot { color: #007020; }
code > span.al { color: #ff0000; font-weight: bold; }
code > span.fu { color: #06287e; }
code > span.er { color: #ff0000; font-weight: bold; }
</style>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/newism/jquery-nsmToc.js/master/jquery-nsmToc.js"></script>
<style type="text/css">
html, body {
font-family:sans-serif;
margin:0;
padding:0;
}
body {padding:40px; padding-right:336px;}
.toc-prelude{color:#999; font-size:10px;}
.tags, #toc .tags a{color:#f00}
.toc-top{font-size:10px; margin-left:5px;}
#toc{background:#333; font-size:11px; padding:18px 18px 18px 0; position:fixed; top:0; right:0; width:300px;}
#toc ul, #toc li{line-height:1.3em; margin:0; padding:0; list-style-type:none}
#toc li{margin-left:18px;}
#toc a{color:#fff; text-decoration:none;}
#toc a span{color:#999;}
.tags, #toc .tags a{color:#f00}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("body").nsmToc({
generate_toc: true,
header_selector: ":header:visible",
toc_el: "#toc",
toc_title: false,
start_depth: 1,
end_depth: 3,
append_top_links: false
});
});
</script>
</head>
<body>
<h1 class="toc-ignore">ExpressionEngine Fundamentals</h1>
<p>By <a href="http://leevigraham.com">Leevi Graham</a></p>
<div id="toc"></div>
<h1 id="prelude">Prelude</h1>
<p>@TODO</p>
<h2 id="target-audience">Target Audience</h2>
<p>This book is targeted at novice to intermediate developers wishing to learn how to better structure their ExpressionEngine sites. An understanding of ExpressionEngine is required to get the most out of it, however we’ve tried to link to external resources where possible.</p>
<h2 id="acknowledgements">Acknowledgements</h2>
<p>This book is inspired by <a href="https://github.com/addyosmani/backbone-fundamentals">Developing Backbone.js Applications</a>. The Panoc build code was taken directly from the Github Repo.</p>
<h2 id="credits">Credits</h2>
<p>@TODO</p>
<h2 id="reading">Reading</h2>
<p>@TODO</p>
<h1 id="installing-expressionengine">Installing ExpressionEngine</h1>
<p>This section describes how to modify the default folder structure in order secure your installation and bootstrap configuration for multiple development environments before running the installation wizard.</p>
<p>To start</p>
<ol type="1">
<li>download the latest version of ExpressionEngine 2</li>
<li>unzip</li>
<li>in terminal cd into the unzipped folder</li>
</ol>
<pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">cd</span> unzipped_folder_path</code></pre>
<h2 id="folder-structure">Folder structure</h2>
<p>Now we need to modify our folder structure before running the install wizard.</p>
<pre class="sourceCode bash"><code class="sourceCode bash"><span class="co"># Create a folder which will become our document root</span>
<span class="kw">mkdir</span> public_html
<span class="co"># Move admin.php into public_html so it's accessible</span>
<span class="kw">mv</span> admin.php public_html/
<span class="co"># Move index.php into public_html so it's accessible</span>
<span class="kw">mv</span> index.php public_html/
<span class="co"># Move themes into public_html so it's accessible</span>
<span class="kw">mv</span> themes/ public_html/
<span class="co"># Move images into public_html so it's accessible</span>
<span class="kw">mv</span> images/ public_html/
<span class="co"># Move uploads into public_html so it's accessible</span>
<span class="kw">mv</span> public_html/images/uploads/ public_html/
<span class="co"># Create subfolders to seperate member uploads and content admin uploads</span>
<span class="kw">mkdir</span> public_html/uploads/member
<span class="kw">mkdir</span> public_html/uploads/content
<span class="co"># Move member upload folders into member folder</span>
<span class="kw">mv</span> public_html/images/member_photos/ public_html/uploads/member/photos/
<span class="kw">mv</span> public_html/images/avatars/ public_html/uploads/member/
<span class="kw">mv</span> public_html/images/pm_attachments/ public_html/uploads/member/
<span class="kw">mv</span> public_html/images/signature_attachments/ public_html/uploads/member/
<span class="co"># Move bundled third_party addons into the root</span>
<span class="co"># This makes upgrading system files easier in the future</span>
<span class="kw">mv</span> system/expressionengine/third_party/ ./
<span class="co"># Create a placeholder folder for the site theme</span>
<span class="kw">mkdir</span> public_html/themes/site_themes/default
<span class="co"># Create a placeholder folder for the site templates</span>
<span class="kw">mkdir</span> -p views/templates</code></pre>
<h2 id="folder-file-permissions">Folder / file permissions</h2>
<p>Set the following files to 666:</p>
<ul>
<li><code>system/expressionengine/config/config.php</code></li>
<li><code>system/expressionengine/config/database.php</code></li>
<li><code>views/templates</code></li>
</ul>
<p>Set the following folders to 777:</p>
<ul>
<li><code>system/expressionengine/cache/</code></li>
<li><code>public_html/images/*</code></li>
<li><code>public_html/uploads/*</code></li>
</ul>
<h2 id="config_bootstrap.php">config_bootstrap.php</h2>
<p>NSM Config Bootstrap is a single file that allows you to:</p>
<ul>
<li>configure all aspects of your EE install including thrid party addons</li>
<li>create multiple environment configurations</li>
<li>define global variables</li>
<li>define file paths</li>
</ul>
<p>Install <code>config_bootstrap.php</code> by <a href="http://ee-garage.com/nsm-config-bootstrap#toc-installation">following the documentation</a>.</p>
<p>The default <code>config_bootstrap.php</code> assumes the folder structure modified by the script above.</p>
<h2 id="database-configuration">Database Configuration</h2>
<p>Before we run the installation wizard you’ll need to create a database and add the details to the <code>config_bootstrap.php</code> file.</p>
<p>Given we’ve configured the domain name to be <code>http://local.ee-book.com</code> you’ll need to add your DB details <a href="https://gist.github.com/leevigraham/e0a7fb4e00bba0350705#file-config_bootstrap_v2-php-L120">to the <code>local</code> environment configuration</a>.</p>
<h2 id="system-path-configuration">System path configuration</h2>
<p>We’ve moved our folders around which means we need to tell EE where to look for it’s system folders.</p>
<ol type="1">
<li>Open <code>/public_html/admin.php</code> & <code>/public_html/index.php</code></li>
<li>Change <code>$system_path = './system';</code> to <code>$system_path = '../system';</code> (Extra dot)</li>
</ol>
<h2 id="configuring-your-webserver">Configuring your webserver</h2>
<p>Create a new apache virtual host with the following details:</p>
<ul>
<li>Domain Name: <code>http://local.ee-book.com</code></li>
<li>Local Path: <code>path_to_your_folder/public_html</code></li>
</ul>
<h2 id="installation-wizard">Installation wizard</h2>
<p>To install EE visit http://local.ee-book.com/admin.php and follow the instructions.</p>
<p>Don’t forget to remove <code>/system/installer</code> after the install runs.</p>
<pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">sudo</span> rm -R system/installer</code></pre>
<h2 id="next">Next</h2>
<p>Let’s get to know the ExpressionEngine CP (Control Panel).</p>
<h1 id="the-expressionengine-cp-control-panel">The ExpressionEngine CP (Control Panel)</h1>
<p>Now that ExpressionEngine has been installed it’s time to login. Here’s the CP url: http://local.ee-book.com/admin.php</p>
<h2 id="customising-the-cp">Customising the CP</h2>
<p>The default CP is fine but thanks to the work of many third_party addon developers we can make it even better. Lets start with some simple tweaks that I consider <em>must have</em>.</p>
<h3 id="override.css---aud-9.95"><a href="http://ee-garage.com/override-css">Override.css</a> - $AUD 9.95</h3>
<p>By Leevi Graham (Me)</p>
<p>From the author:</p>
<blockquote>
<p>The default design of the default CP isn’t to everyones tastes. Override.css is a stylesheet that takes the default CP theme and adds consistency, improved contrast and greater user experience for content managers and ExpressionEngine implementors. Choose one of 10 different colourways or easily generate your own.</p>
</blockquote>
<p>Disclaimer: I wrote this addon.</p>
<h3 id="module-nav---free"><a href="http://devot-ee.com/add-ons/module-nav">Module Nav</a> - Free</h3>
<p>By Brandon Kelly</p>
<p>From the author:</p>
<blockquote>
<p>Module Nav is an EE2 accessory that makes two changes to EE2’s top navigation: * Replaces the “Add-Ons” menu with a new “Modules” menu, populated with links to your modules’ CP backends * Moves the old “Add-Ons” menu into the “Admin” menu, under “Add-on Administration”</p>
</blockquote>
<p>Note: If you get and error after installing checkout my <a href="https://github.com/brandonkelly/module_nav/pull/3/files">pull request</a></p>
<h3 id="field-editor---us-9.99"><a href="http://devot-ee.com/add-ons/field-editor">Field Editor</a> - $US 9.99</h3>
<p>By Chris Newton</p>
<p>This addon is amazeballs and I can’t live without it. It makes managing channel fields really easy and effecient.</p>
<p>From the author:</p>
<blockquote>
<p>Breathe new life into EE’s channel fields editor! Adding & editing fields won’t be a chore anymore. Field Editor adds powerful features to EE’s standard field editor interface. Rather than laboriously clicking and editing each and every channel field or clicking and clicking and clicking to add new fields to a channel, you can now add, delete, re-order and manipulate your custom fields all in one simple interface.</p>
</blockquote>
<h3 id="developer---free"><a href="http://www.putyourlightson.net/developer">Developer</a> - Free</h3>
<p>By Ben Crocker</p>
<p>From the author:</p>
<blockquote>
<p>Developer is an accessory that allows EE site developers to quickly access the most essential sections of the control panel during site setup.</p>
</blockquote>
<h3 id="environment---free"><a href="http://devot-ee.com/add-ons/environment">Environment</a> - Free</h3>
<p>By Trevor Davis</p>
<p>From the author:</p>
<blockquote>
<p>Display which environment you are on at all times in the CP so you don’t accidentally do something bad on the production environment.</p>
</blockquote>
<p>There’s nothing worse than for a split moment thinking you delete content on your production site. We’ve all done it. We’ll probably do it again. This addon will at least give you a heads up.</p>
<h3 id="zoo-flexible-admin---us-22.00"><a href="http://devot-ee.com/add-ons/zoo-flexible-admin">Zoo Flexible Admin</a> - $US 22.00</h3>
<p>By ExpressionEngine Zoo</p>
<p>From the author:</p>
<blockquote>
<p>Make it easier for you and your clients to use the EE control panel. Zoo Flexible Admin lets you fully customize the control panel menu per membergroup. Insert custom links, rename, re-order and remove menu items in order to create a more intuitive menu.</p>
</blockquote>
<h3 id="more-addons">More Addons</h3>
<p>There’s plenty more third_party addons for improving your CP experience like:</p>
<ul>
<li><a href="http://devot-ee.com/add-ons/draggable">Draggable</a> - $US 5.00</li>
<li><a href="http://devot-ee.com/add-ons/zenbu">Zenbu</a> - $US 60.00</li>
</ul>
</body>
</html>