Developing in Solodev

So now you have a website design and you're ready to start. Now it is time to start developing your website in Solodev. Solodev offers many ways to develop your website so let's go over a few.

There are four methods you can use to develop websites in Solodev:

  • WYSIWYG - Use our visual editor, also known as a WYSIWYG (What You See is What You Get)
  • SOURCE - Use our visual editor but click the SOURCE button so you're actually coding
  • FILE - Program in a numbered file much like a file in an IDE
  • IDE - Develop your entire website using your Integrated Development Environment (IDE) of choice and copy and paste your code into Solodev
Note: Most developers choose to use their own IDE because of familiarity. 

On top of WHERE you program your Solodev Website, the HOW is more important. 

Solodev provides two options for client and server side web development:

  • You can use Solodev Shortcodes in conjunction with your HTML markup
  • You can code in PHP and/or JavaScript and ignore Solodev Shortcodes altogether
  • You can build pages, templates, and modules using Solodev Packages

Let's take a look at how each approach differs. 

Note: The HTML form you upload to specify the form fields of your manager (or via table schema) remains the same despite developing in PHP or using short codes.
<div class="form-group">
<label class="control-label" for="news_intro">Introduction</label>
<textarea class="form-control" id="news_intro" name="news_intro"></textarea>
</div>

<div class="form-group">
<label class="control-label" for="news_details">Description (News Details)</label>
<textarea class="form-control wysiwyg" id="news_details" name="news_details"></textarea>
</div>

<div class="form-group">
<label class="control-label" for="image">Main Image</label>
<input id="image" name="image" type="file">
</div>

<div class="form-group">
<label class="control-label" for="image_desc">Main Image Desc</label>
<input class="form-control" id="image_desc" name="image_desc" type="text">
</div>

Building a News Module Using Shortcodes

Repeater Template

This template repeats all of the entries in the module.

[template_repeater]
<div class="row news" onclick="window.location='{{path}}'">
<div class="col-sm-4">
<div class="fauxcrop image_crop"><img alt="{{name}}" src="{{image_url}}"></div>
</div>
<div class="col-sm-8 newstitle">
<span class="news-index-date">[template_print_date template_start_time="{{start_time}}"]</span>
<h2><a href="{{path}}">{{event_title}}</a></h2>
<p>{{news_intro}}</p>
</div>
</div>
[/template_repeater]

Detail Template

This template displays the details of a single entry.

[entry]
<div class="container news-detail-container">
<div class="col-sm-4 news-img">
<img alt="[get_asset_file_name id={{image}}]" class="img-responsive img-thumbnail image-left" src="[get_asset_file_url id={{image}}]">
</div>
<div class="col-sm-8">
<h2>{{event_title}}</h2>
<span class="news-date"><strong>
[print_date format="F d, Y g:ia" timestamp="{{start_time}}"]
</strong></span>
<div class="clearfix"></div>
<p>{{news_details}}</p>
</div>
</div>
[/entry]

Click here to learn how to develop using Solodev Shortcodes.


Building a News Module Using PHP

Repeater Template

This template repeats all of the entries in the module.

<?php 
$oAssetImage = new Asset_File($item->image);
$sURLStem = '/news';
?>
<div class="row">
<div class="col-sm-3">
<a href="<?= $sURLStem . $item->path ?>">
<img alt="<?= $item->image_desc ?>" class="img-thumbnail" src="/core/fileparse.php/<?= $oAssetImage->parent_category_id ?>/urlt/<?= $oAssetImage->name ?>">
</a>
</div>
<div class="col-sm-9">
<h2><a href="<?= $sURLStem . $item->path ?>"><?= $item->event_title ?></a></h2>
<div class="date"><?= date('F jS, Y', $item->start_time) ?></div>
<p><?= $item->news_intro ?></p>
</div>
</div>

Detail Template

This template displays the details of a single entry.

<?php 
$oAssetImage = new Asset_File($eventVars['image']);
?>
<h2><?= $eventVars['event_title'] ?></h2>
<div class="date"><?= date('F jS, Y', $eventVars['start_time']) ?></div>
<img alt="<?= $eventVars['image_desc'] ?>" class="img-thumbnail pull-right" src="/core/fileparse.php/<?= $oAssetImage->parent_category_id ?>/urlt/<?= $oAssetImage->name ?>">
<p><?= $eventVars['news_details'] ?></p>

Developing in Solodev Using Packages

An alternate way to build anything in Solodev is to utilize packages. Packages can be used to build entire websites or just components within that website such as pages, folders, modules, and templates. Below is an example of how a package for a news module would look in JSON format.

Note: This config file below just pulls resources from the folder in which it is housed, you will still need to create all of the files it is referencing for this functionality to work.

"modules": [{
		"module_type": "Calendar",
		"to_path": "web files/managers/news",
		"name": "News",
		"form_template": {
			"file_path": "managers/news/news-form.tpl"
		},
		"display_template": {
			"file_path": "managers/news/repeater.tpl"
		},
		"detail_display_template": {
			"file_path": "managers/news/detail.tpl"
		},
		"html_template": "www/news/detail.stml",
		"dependent_templates": [{
			"name": "home-news.tpl",
			"from_path": "managers/news/",
			"to_path": "web files/managers/news/"
		}, {
			"name": "news-custom-repeater.tpl",
			"from_path": "managers/news/",
			"to_path": "web files/managers/news/"
		}]
	}],

Click here to learn more about developing in Solodev using packages.

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request